axios常用的请求方法
方法列举：get, post, put, patch, delete
- get：一般用户获取数据
- post：一般用于表单提交与文件上传
- patch：更新数据（只将修改的数据推送到后端）
- put：更新数据（所有数据推送到服务端）
- delete：删除数据
备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。
get方法
- 方式一
如果不带有参数，代码如下：
axios
.get("/data.json")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
如果带有参数，代码如下：
axios
.get("/data.json", {
params: {
id: 12
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
此时表示，参数为id=12，最终的请求路径Request URL: http://localhost:8080/data.json?id=12
- 方式二
如果不带参数，代码如下：
axios({
method:'get',
url:'/data.json'
}).then(res=>{
console.log(res)
})
如果带有参数，代码如下：
axios({
method: "get",
url: "/data.json",
params:{
id:12
}
}).then(res => {
console.log(res);
});
此时表示，参数为id=12，最终的请求路径Request URL:http://localhost:8080/data.json?id=12
浏览器控制台相关信息介绍：
-
Request URL：请求URL
-
Request Method：请求方式
post方法
post请求常用的数据请求格式有两种：
form-data（常用于表单提交（图片上传、文件上传））
let data = {
id: 12
};
let formData = new FormData();
for(let key in data){
formData.append(key,data[key])
}
console.log(formData)
axios.post('/data.json',formData).then(res=>{
console.log(res,'formData')
})
注意：请求地址Request URL: http://192.168.1.106:8080/data.json，
请求头中Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydgohzXGsZdFwS16Y
参数形式：id:12
application/json（常用）
- 方式一
let data = {
id: 12
};
axios.post("/data.json", data).then(res=>{
console.log(res, 'post')
});
- 方式二
let data = {
id: 12
};
axios({
method:'post',
url:'/data.json',
data:data
}).then(res=>{
console.log(res)
})
注意：请求地址Request URL: http://192.168.1.106:8080/data.json，
请求头中Content-Type: application/json;charset=UTF-8
参数形式：{id:12}
put方法
let data = {
id: 12
};
axios.put("/data.json", data).then(res=>{
console.log(res, 'put')
});
patch方法
let data = {
id: 12
};
axios.patch("/data.json", data).then(res=>{
console.log(res, 'patch')
});
备注：put与patch与post方法只有method不同，其他相同。
delete方法
- 方式一：params
axios
.delete("/data.json", {
params: {
id: 12
}
})
.then(res => {
console.log(res, "delete");
});
let params = {
id: 12
};
axios({
method:'delete',
url:'/data.json',
params:params
}).then(res=>{
console.log(res)
})
- 方式二：data
axios
.delete("/data.json", {
data: {
id: 12
}
})
.then(res => {
console.log(res, "delete");
});
let data = {
id: 12
};
axios({
method:'delete',
url:'/data.json',
data:data
}).then(res=>{
console.log(res)
})
注意：params方式会将请求参数拼接在URL上面，Request URL: http://192.168.1.106:8080/data.json?id=12
参数形式：id:12
Content-Type: text/html; charset=utf-8
data方式不会讲参数拼接，是直接放置在请求体中的，Request URL:http://192.168.1.106:8080/data.json
参数形式：{id:12}
Content-Type: application/json;charset=UTF-8
总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；
并发请求
并发请求，就是同时进行多个请求，并统一处理返回值。
在例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：
// 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes);
})
);
注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理，即可。
并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。