vue3项目中6种带参访问接口
王*
vue3,js,get,post
项目描述
不同的带参方式适用于各种接口类型
上传时间
2023.06.26
浏览人数
382人
王*
河南省信阳市淮滨县
Hot:3039
常见的http请求方式包括：get、post、put、delete等。其中 get、post也是最常见的两种接口类型
（1）get类型接口
格式：请求数参数写在网址后面，用”?”连接，多个参数之间用”&”连接。
场景：get型接口用于获取信息，一般情况下请求的数据量较小，返回速度快，不过接口是暴露在外面的，所以会有一定的风险。
（2）post型接口
说明：向指定资源位置提交数据（如提交表单、上传文件）来进行请求，post请求可能会导致新资源的建立。
场景：如注册、上传、发帖等功能，这种请求数据量大，安全性要求高
第一种带参访问接口方式
带文件的形式:
// Post: http:/xxx.xxx/addStu
// 参数要放在FormData
// let fm = new FormData();
// fm.append(...);
// fm.append(...);
// fm.append(...);
postFile(url,params){
const config = {
method: 'post',
url:url,
header:{
"Content-Type":"multipart/form-data"
}
}
if(params) config.data = params
return request(config)
},
export function xxx( formData ){
return http.postFile('http://xxxx.com/addInfo', formData )
}
第二种带参访问接口方式
// Post之Raw传值:
//POST
// export function Xxxx( ){
// return http.postFile('http://zhuzuoji.com/addStu', fm )
// }
要在htpp.js中重新改写一个带文件传参的post类型
//http://jsonplaceholder.typicode.com/posts
// let p = {"userId":1, "title":"houseilei", "body":"好塞雷"};
// export function Xxxx( ){
// return http.postRaw('http://jsonplaceholder.typicode.com/posts', p )
// }
在htpp.js中重新改写post类型
raw(url,params){
const config = {
method: 'post',
url:url,
headers: {
'Content-Type': 'application/json'
},
};
if(params) config.data =JSON.stringify(params) ;
return request(config)
},
export function xxx( params ){
return http.raw('http://xxxx.com/addInfo', params )
}
第三种带参访问接口方式
// Get : http://jsonplaceholder.typicode.com/comments/4
// export function Xxxx( ){
// return http.get('http://jsonplaceholder.typicode.com/comments/4',{})
// }
export function xxx(){
return http.get('http://xxxx.com/xxxx/1,{})
}
第四种带参访问接口方式
// Post: http://zhuzuoji.com/addStu
// {"id":1005, "name":"小李"}
// export function Xxxx( ){
// return http.post('http://jsonplaceholder.typicode.com/comments', {"id":1005, "name":"小李"} )
// }
export function xxx( ){
return http.post('http://xxxx.com/addInfo', {"id":1005, "name":"小李"} )
}
第五种带参访问接口方式
// 普通方式:
// Get : http://jsonplaceholder.typicode.com/comments?postId=4
// export function Xxxx( ){
// return http.get('http://jsonplaceholder.typicode.com/comments?postId=4',{})
// }
export function xxx(参数){
return http.get('http://xxxx.com/xxxx?Id='+参数)
}
第六种带参访问接口方式
// Get : http://jsonplaceholder.typicode.com/comments
// {"postId":4}
// export function Xxxx( ){
// return http.get('http://jsonplaceholder.typicode.com/comments',{"postId":4})
// }
export function xxx(参数){
return http.get('http://xxxx.com/xxxx,参数)
}
王*
