Vue3带参访问接口的6种方式
宋天*
Vue3;带参访问接口
项目描述
Vue3带参访问接口的6种方式
上传时间
2023.06.27
浏览人数
768人
宋天*
山东省济宁市鱼台县
Hot:2123
vue3带参访问接口的6种方式
常见的http请求方式包括：get、post、put、delete等。其中 get、post也是最常见的两种接口类型
（1）get类型接口
格式：请求数参数写在网址后面，用”?”连接，多个参数之间用”&”连接。
场景：get型接口用于获取信息，一般情况下请求的数据量较小，返回速度快，不过接口是暴露在外面的，所以会有一定的风险。
（2）post型接口
说明：向指定资源位置提交数据（如提交表单、上传文件）来进行请求，post请求可能会导致新资源的建立。
场景：如注册、上传、发帖等功能，这种请求数据量大，安全性要求高
GET
const http ={
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url,params){
const config = {
method: 'get',
url:url
};
if(params) config.params = params;
return request(config)
},
}
//导出
export default http
Get : http://jsonplaceholder.typicode.com/comments?postId=4
export function Xxxx( ){
return http.get('http://jsonplaceholder.typicode.com/comments?postId=4',{})
}
Get : http://jsonplaceholder.typicode.com/comments/4
export function Xxxx( ){
return http.get('http://jsonplaceholder.typicode.com/comments/4',{})
}
Get : http://jsonplaceholder.typicode.com/comments
{"postId":4}
export function Xxxx( ){
return http.get('http://jsonplaceholder.typicode.com/comments',{"postId":4})
}
POST
Post: http://zhuzuoji.com/addStu
{"id":1005, "name":"小李"}
export function Xxxx( ){
return http.post('http://jsonplaceholder.typicode.com/comments', {"id":1005, "name":"小李"} )
}
携带文件的形式:
Post: http://zhuzuoji.com/addStu
参数要放在FormData
let fm = new FormData();
fm.append(...);
fm.append(...);
fm.append(...);
export function Xxxx( ){
return http.postFile('http://zhuzuoji.com/addStu', fm )
}
Post之Raw传值:
POST
http://jsonplaceholder.typicode.com/posts
示例参数： {"id":"" , "name":"", age:""}
const http ={
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
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 default http
let params = {"id":1, "name":"xxx", "age":18};
export function xxx( params ){
return http.raw('http://xxxx.com/addInfo', params )
}
宋天*
