这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

axios的扩展插件

上一篇文章我们讲了axios的扩展插件 - 缓存插件，今天咱们再来说说axios的其余2款扩展插件 - 节流插件，重试插件。

注意：axios的扩展插件都是针对get请求

axios安装

npm i axios -S // 或者 yarn add axios -S

插件安装

npm i axios-extensions -S // 或者 yarn add axios-extensions -S

节流插件

如果在一定时间间隔内会发出多个请求，如果数据不经常改变，我们之前介绍过可以使用缓存插件，但是如果我们数据是有可能短时间内改变的话，或者不确定数据是否会改变，那么就可以使用节流插件。因为它默认的时间间隔比缓存插件的短，默认是1s

就是1s内只会发一次请求。其它的请求不会发出，返回的是那一次的请求结果。

使用

throttleAdapterEnhancer(adapter, options)

option 对象，可选

• threshold

  节流的间隔，Number类型， 默认是1000，毫秒为单位。

• cache

  可以配置 max（节流请求的最大个数），默认是100个，可以通过Cache对象来重写，如下

    import { Cache } from 'axios-extensions'
    const cache = new Cache({
     max: 100
    });
    throttleAdapterEnhancer(axios.defaults.adapter, {
     cache
    })
  

一般推荐节流插件和缓存插件配合使用

如下：

throttleAdapterEnhancer(cacheAdapterEnhancer(axios.defaults.adapter, option), option)

例子：

import axios from 'axios';
import { throttleAdapterEnhancer } from 'axios-extensions';

const instance = axios.create({
	adapter: throttleAdapterEnhancer(axios.defaults.adapter)
});

instance.get('/test'); // 发出请求
instance.get('/test'); // 缓存请求

setTimeout(() => {
  instance.get('/test'); // 发出请求
}, 2000)

重试插件

如果我们请求失败的话，axios默认是中止，不会帮我们重新发起请求。现在axios的重试插件可以加上重试机制。

使用

retryAdapterEnhancer(adapter, options)

option 对象，可选

• times

  重试的次数，Number类型， 默认是2，请求失败后会重试2次。

import axios from 'axios';
import { retryAdapterEnhancer } from 'axios-extensions';

const instance = axios.create({
    adapter: retryAdapterEnhancer(axios.defaults.adapter,{times: 3})
});
// 如果请求失败，会重试3次
instance.get('/users')

// 改写次数为5次，如果请求失败，会重试5次
instance.get('/special', { retryTimes: 5 });