Axios

文档

• 错误处理

使用方法

取消请求

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
 
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
 
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})
 
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

网络超时处理

service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
  if(err.code === 'ECONNABORTED' || err.message === 'Network Error' || err.message.includes('timeout')) {
    app.$message.warning('网络异常，请稍后重试!')
    return Promise.reject(err)
  }
  return Promise.reject(error);
});

自定义 adapter

import Axios from 'axios';
import jsonpAdapter from './jsonpAdater';
 
const request = Axios.create({
    adapter: (config) => {
        if (config?.params?.format === 'jsonp') {
            return jsonpAdapter(config);
        }
 
        // 这里需要将config.adapter设置为空
        // 否则会造成无限循环
        return defaultAxios({ ...config, ...{ adapter: undefined } });
    },
});

阅读更多内容可以查看：

• 07. Axios 如何缓存数据，防止重复请求
• 如何实现 axios 的自定义适配器 adapter
• axios适配器拦截请求

TypeScript

• TypeScript实战之用TS封装Axios

扩展阅读

• vue切换路由后取消未完成的axios请求
• axios 请求拦截，如何判断是网络超时还是接口报错
• Document Redirect 与 XHR Redirect区别