首先，我们项目的src路径下的service文件夹下，新建base文件夹，在base文件夹里新建axios.js。
一、axios统一封装
首先引入axios和qs依赖。
import axios from 'axios';
import qs from "qs";
然后开始使用request拦截器对axios请求配置做统一处理
axios.interceptors.request.use(
config => {
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
return config
},
err => {
console.error('axios request 请求出错：', err)
return Promise.reject(err)
}
)
再来对response做统一处理
axios.interceptors.response.use(
response => {
if (response && response.data) {
let data = response.data || {}
if (data && (data['code'] === "201")) {
//登录失效
}
}
return response
},
err => {
console.error('axios response 请求出错：', err)
let res = {
success: false,
message: '系统错误，请重试！'
}
return Promise.resolve(res)
}
)
最后，将我们的axios实例暴露出去，整个axios的封装就写完了。
export default axios
二、axios封装的调用方式
axios封装好之后，调用就很简单了。我们把接口统一写在service.js文件里。（当然，如果你的业务非常复杂的话，建议把不同业务的api分开放到不同的文件里，这样方便以后维护）。
注意：post请求参数放在data里面，get请求参数放在params里。
//service.js
import service from '../base/axios'
export const getData = data => {
return service({
url: '/api/user/getUserInfo',
method: 'post',
data
})
};
然后在具体的组件中进行调用。
//index.vue
import {getData} from '../../service/service.js'
export default {
created: async function () {
let params = {
token: '2323232'
};
let res = await getData(params);
console.log(res);
}
}
