axios常用操作

时间:2024-08-26 13:04:38

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)的错误。