axios常用操作
一：函数化编程
1:编写可复用的方法
axios(config)的方法中，有必须的url参数和非必须的options参数。所以我们可以先写一个接受这两个参数的方法，在这个方法中我们可以添加一些业务化的代码，例如修改headers中的一些参数。
function request(url, options) {
const defaultOptions = {
credentials: 'include',
};
const newOptions = { ...defaultOptions, ...options };
newOptions.headers = {
...newOptions.headers,
};
if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
newOptions.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
...newOptions.headers,
};
newOptions.data = JSON.stringify(newOptions.data);
}
return axios({ url, ...newOptions })
.then(checkStatus)
.then((response) => {
return response.data;
})
.catch((e) => {
if (status === 403) {
// 跳转
}
});
}
export default request;
然后我们在services文件中调用这个方法：
export async function api() {
return request('/aa/bb');
}
export async function api2(params) {
return request('/aa/cc', {
method: 'PUT',
data: params,
});
}
二：拦截
1：如何在axios拦截时修改headers中的值(例如多语言)
axios.interceptors.request.use(
(config) => {
const config2 = config;
config2.timeout = 30000; //eslint-disable-line
config2.headers['Accept-language'] = 'USSSSS';
return config2;
},
(error) => {
// Do something with request error
return Promise.reject(error);
}
);
如果这里直接操作config会报 no-param-reassign （eslint）的错误。