axios较完美的超时以及重试失败解决方案

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

爱热闹的松鼠 · 3 万 Star！一键将 Notion ...· 2 天前 ·

拉风的猴子 · 新鮮事│安藤忠雄「童書之森」圖書館落腳台中！ ...· 昨天 ·

年轻有为的开水瓶 · 使用cloudflare | Web_Basic· 昨天 ·

腼腆的卡布奇诺 · 任务栏有新消息时只闪烁没有颜色提醒 - ...· 23 小时前 ·

含蓄的薯片 · 管弦教研组 - 教师简介 - ...· 2 周前 ·

热心肠的人字拖 · [Windows 11/10] 控制中心 ...· 5 月前 ·

坏坏的羽毛球 · 2019年PSA全球销量达350万台 ...· 10 月前 ·

大气的登山鞋 · html.用了<pre>标签，字体变小了。怎 ...· 1 年前 ·

风流的冰淇淋 · 拿破仑-狮子的时代 - 搜狗百科· 1 年前 ·

## 代码引用
1. [Retry Solution From KyleRoss@github](https://github.com/axios/axios/issues/164#issuecomment-327837467 "Retry Solution From KyleRoss@github")
2. [Timeout Solution From aarcangeli@github](https://github.com/axios/axios/issues/2143#issuecomment-495994940 "Timeout Solution From aarcangeli@github")
## axios 的 retry 解决方案
见：[Retry Solution From KyleRoss@github](https://github.com/axios/axios/issues/164#issuecomment-327837467 "Retry Solution From KyleRoss@github")
## axios 的 timeout 问题
在`0.18.0`版本中`axios`的`timeout`并没有被正确实现导致有可能在弱网环境或不稳定环境或代理环境下`timeout`无效、程序卡住的情况（见：[Axios will not timeout on idle sockets](https://github.com/axios/axios/issues/2143 "Axios will not timeout on idle sockets")），虽然这问题在`0.19.0`版本中修复了，但是`0.19.0`版本中对配置合并的规则的阻断性更新导致我们的重试失败解决方案失效（见：[Axios 0.19.0 issue](https://github.com/axios/axios/issues/2397 "Axios 0.19.0 issue")），所以我们无法升级到`0.19.0`来解决这个问题。
## 用 CancelToken 替代 timeout
根据 [@aarcangeli](https://github.com/aarcangeli "@aarcangeli") 提供的 [CancelToken 代替方案](https://github.com/axios/axios/issues/2143#issuecomment-495994940 "CancelToken 代替方案")，我们可以很轻松的解决上面所述的 timeout 问题。
```js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
let timeout = setTimeout(() => source.cancel('Timeout'), 5000);
axios.get('http://localhost:3000', { timeout: 1000, cancelToken: source.token })
    .then(() => { clearTimeout(timeout); console.log('hello there') });
## 最终解决方案
```js
const axios = require('axios');
timeout = 10000;
// BUG: https://github.com/axios/axios/issues/2143
// axios.defaults.timeout = timeout;
axios.defaults.retry = 3;
axios.defaults.retryDelay = 1000;
function axiosRetryInterceptor(err) {
    var message, config;
    if (axios.isCancel(err)) {
        message = err.message.message;
        config = err.message.config;
    } else {
        message = err.message;
        config = err.config;
    config.clearCancelToken();
    // If config does not exist or the retry option is not set, reject
    if(!config || !config.retry) return Promise.reject(new Error(message));
    // Set the variable for keeping track of the retry count
    config.__retryCount = config.__retryCount || 0;
    // Check if we've maxed out the total number of retries
    if(config.__retryCount >= config.retry) {
        // Reject with the error
        return Promise.reject(new Error(message));
    // Increase the retry count
    config.__retryCount += 1;
    // Create new promise to handle exponential backoff
    var backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, config.retryDelay || 1);
    // Return the promise in which recalls axios to retry the request
    return backoff.then(function() {
        console.log(`请求失败，重试中：${config.url}`);
        return axios(config);
axios.interceptors.request.use(function (config) {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    let token = setTimeout(() => source.cancel({message:'Timeout', config: config}), timeout);
    config.cancelToken = source.token;
    config.clearCancelToken = () => clearTimeout(token);
    return config;
axios.interceptors.response.use(function (response){
    response.config.clearCancelToken();
    return response;
}, axiosRetryInterceptor);
axios.get("https://example.com/").then(response => {
    console.log(response.data);
}, error => console.log(error));
## 注意事项
`npm install`时请指定`axios`版本为`0.18.0`，因为上面的代码针对的都是`0.18.0`版本的`axios`。
```shell
npm install axios@0.18.0 --save