写了一个 axios 缓存插件，帮你缓存 GET 请求

[jin5354]

业务上遇到了自己控制缓存的需求，于是在 axios 上实现了一个简单的缓存层，抽出来分享一下(｀･ω･´)

Github 仓库: axios-cache-plugin

安装

npm install axios-cache-plugin --save-dev

or

yarn add axios-cache-plugin --dev

使用

引入 wrapper，然后裹在 axios 或者 axios 实例上并用返回值替代即可，不用修改业务代码

import axios from 'axios'
import wrapper from 'axios-cache-plugin'

let http = wrapper(axios, {
  maxCacheSize: 15
})
export default http

API

插件并不是缓存全部 GET 请求，而是按正则匹配缓存指定的请求，这要求你添加 filter，url 命中 filter 的请求才会被缓存哦。（默认情况下不缓存任何请求。）

• instance.__addFilter 添加 filter
• instance.__removeFilter 移除 filter

import axios from 'axios'
import wrapper from 'axios-cache-plugin'

let http = wrapper(axios, {
  maxCacheSize: 15
})
http.__addFilter(/users/)  //添加一个 filter

http({
  url: 'http://www.404forest.com:3000/users/jin5354',
  //命中 filter 啦，现在 http://www.404forest.com:3000/users/jin5354?test=something 结果会被缓存
  method: 'get',
  params: {
    test: 'something'
  }
})

http({
  url: 'http://www.404forest.com:3000/users/jin5354',
   //重复请求直接返回缓存结果，不再发新请求了。
  method: 'get',
  params: {
    test: 'something'
  }
})

wrapper option

包装 axios 实例时可以指定两个缓存配置项：maxCacheSize 和 ttl，非必需指定

maxCacheSize 指定最多可缓存的条目数，超过这个数量时最早的缓存会被删除，默认为 15

ttl 指缓存存活时间，单位为 ms，超过这个时间缓存条目自动消除。

let http = wrapper(axios, {
  maxCacheSize: 15,
  ttl: 60000
})

积极维护中，欢迎反馈

[v1024]

滋瓷，mark

[MinonHeart]

需要把浏览器缓存踢掉

[jin5354]

@MinonHeart
请求会先通过 axios 的缓存层，再走浏览器缓存，如果两个缓存都存在，可以节省一次 304
当然先把浏览器缓存禁掉控制更准确一些

[leopku]

滋瓷
star

[skxtay]

滋瓷