本文是基于Axios技术发送的请求
一、二次封装axios
当我们的项目配置好axios后,首先对axios进行二次封装,这样一来,不仅最原本的instance没有被污染,也可以更好地满足我们个人的项目需求
axios中文文档:拦截器 | Axios中文文档 | Axios中文网 (axios-http.cn)
const baseURL = 'http://big-event-vue-api-t.itheima.net'
//此处以黑马程序员的vue3大事件项目的接口文档为例
const instance = axios.create({
// 1. 基础地址,超时时间
baseURL,
timeout: 10000
})
以下拦截器代码可从axios文档中直接复制
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
请求拦截器:发生在发送请求之前,一般用于携带token作为headers请求头
响应拦截器:发生在接收到数据之后,一般用于对状态码进行错误处理或者页面跳转
到此就封装好了Axios请求代码,将其命名为request.js放在utils包下
二、对不同请求参数代码的封装
1. Header 参数
Header参数一般写在请求拦截器中
config.headers.Authorization = token
//token从本地存储中获取或者状态管理工具中获取
如果有多个请求头,可以写成
config.headers = {
Authorization : token,
'Content-Type':'application/json;charset=utf-8'
}
配置好请求头之后,剩下的请求参数不必再考虑请求头
2. Body 参数 application/json
// 更新用户基本信息
export const userUpdateInfoService = ({ id, nickname, email }) =>
request.put('/my/userinfo', { id, nickname, email })
用户的基本信息通常作为一个对象参数,从中解构出id、nickname、email,调用put方法,第一个参数是接口路径,第二个参数以请求体的方式发送
这种格式通常用PUT、PATCH和POST方法
3.Body 参数multipart/form-data
4.Query 参数
//方法一
//删除文章分类
export const artDelChannelsService = (id) =>
request.delete('/my/cate/del', {
params: { id }
})
一般情况下也可以写成这种形式
//方法二
export const artDelChannelsService = (id) =>
request.delete(`/my/cate/del?id=${id}`)
这两种方法都是通过url进行传参,axios底层可以使方法一转化为方法二,将参数和url进行拼接传参
三、多种格式传参
有时也会碰上同时以Query 参数和Body 参数同时传参的情况
四、查看网络请求是否正确
如果实在找不到请求错误的原因,可以对比浏览器的请求地址和接口文档测试的地址