问题/需求描述:
- 在项目开发过程中, 如果每一次调用网络请求都去写一次请求的配置参数, 例如: header中的属性(比如需要携带
token、cookie
等身份识别信息, 或者传递参数的格式content-type
, 就比较麻烦. 所以,这里就在axios上对需要固定配置或者不经常改动的信息进行一下初始化.
初步实现
- 首先导入
axios
包, 使用npm命令:npm i axios -S
- 然后在项目中导入:
import axios from ‘axios’
, 这里使用的是ESM导入方式. - 然后就是针对axios可配置项参数进行配置了.
// 1. 导入
import Axios from 'axios';
// 暴露一下自己封住后的方法
export default function request(option) {
// 导出Promise用来处理异步, 相对于传统的callback更加方便, 还可以使用async、awati简化
return new Promise((resolve, reject) => {
// 1.创建axios的实例
const instance = Axios.create({
// 项目中使用到的后端接口的通用url部分
baseURL: 'http://xxxxxxxxxxxxxxx/',
// 最大请求时长
timeout: 10000
});
// 配置请求和响应拦截
instance.interceptors.request.use(config => {
// console.log('来到了request拦截success中');
// 1.当发送网络请求时, 在页面中添加一个loading组件, 作为动画
// 2.某些请求要求用户必须登录, 判断用户是否有token, 如果没有token跳转到login页面
// 3.对请求的参数进行序列化(看服务器是否需要序列化)
// config.data = qs.stringify(config.data)
// console.log(config);
// 4.等等
return config
}, err => {
// console.log('来到了request拦截failure中');
return err
})
instance.interceptors.response.use(response => {
// console.log('来到了response拦截success中');
return response.data
}, err => {
console.log('来到了response拦截failure中');
// 能够根据错误参数code返回失败信息
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
err.message = '未授权的访问'
break
default:
err.message = "其他错误信息"
}
}
return err
})
// 2.传入对象进行网络请求
instance(option).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}