小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

问题

如果我们页面上复用了多个组件，然后这些组件是有网络请求的，这时候，就会造成多个同样的请求在同时发送，所以我们需要对这种请求做限制处理，最好同时只请求一次就行。

如果你是在用axios，然后也遇到这种情况，我推荐使用axios的扩展插件，axios-extensions。

介绍

这个扩展包含3个功能，包括缓存请求结果，节流请求，请求重试。

注意：以上3个功能都是针对get请求

下面介绍一下缓存插件以及如何使用。

安装

axios安装

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

插件安装

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

缓存请求结果

如果是一些数据不经常改变的接口，就可以在固定时间内把数据缓存起来，节约请求的次数。

使用

cacheAdapterEnhancer(axios.defaults.adapter, option)

option 对象，可选

• enabledByDefault

  是否默认缓存，Boolean类型， 默认是true(缓存)， false(不缓存)

• cacheFlag

  是否通过flag方式缓存，字符串类型， 只有flag一样才会缓存，flag不对或者没设置的都不会缓存。

• defaultCache

  可以配置maxAge（缓存有效时间, 毫秒单位），默认是5分钟，max（支持缓存的请求的最大个数），默认是100个，可以通过Cache对象来重写，如下

    import { Cache } from 'axios-extensions'
    const cache = new Cache({
      maxAge: 1000 * 60 * 2, // 2 分钟
      max: 100
    });
  

例子

// 基本使用

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

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

instance.get('/test'); // 发出请求
instance.get('/test'); // 缓存请求
instance.get('/test'， { cache: false }) // 不缓存请求

// 配置cacheFlag

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

const instance = axios.create({
	adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
          cacheFlag: 'flag'
        })
});

instance.get('/test'); // 发出请求
instance.get('/test', {flag: true}); // 缓存请求
instance.get('/users') // 不缓存请求

// 改写defaultCache

import { Cache } from 'axios-extensions'

const cacheObj = new Cache({
  maxAge: 1000 * 60 * 2, // 2 分钟
  max: 100
});
const instance = axios.create({
    adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
      defaultCache: cacheObj  // 重写defaultCache对象，所有请求有效
    })
});

instance.get('/users', {cache: cacheObj}) // 单个请求使用