npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

axios-api-cache

v0.0.2

Published

Axios-based API library, incloding API cache,cancel request and refresh token

Downloads

5

Readme

1、npm i axios-api-cache 2、使用

// filePath: axiosConfig.js
// 1、 其中只封装了get和post的方法
// url 为请求地址,params 为get请求参数,other为其他配置,例如设置header等
// window.apicacheInstance.get(url,params,other={})
// window.apicacheInstance.post(url,params,other={})
// 2、如果想使用axios原始请求
// window.apicacheInstance.$axios 即可,但这样无法使用本缓存,取消请求,和refreshToekn可以正常使用,不建议这样使用
// 3、如果在切换路由时需要取消全部正在请求的接口
// 在路由守卫中调用 window.apicacheInstance.clearCancel()方法

import axios from 'axios'
const Apicache = require('axios-api-cache')
// 其中第二个参数axiosCreateOptions为  axios.create()中配置
const axiosCreateOptions = {}
window.apicacheInstance = new Apicache.Apicache(axios,axiosCreateOptions,{
  isGetcache: true, // 全局默认get请求缓存, 如果不需要缓存,请再请求头中添加 isGetcache: false
  isPostcache: false, // 全局默认post请求不缓存,如果需要缓存,请再请求头中添加 isPostcache: true
  isCancelToken: true, // 全局默认开启取消请求,如果某个接口不许呀,请在请求头中添加 isCancelToken: false
  cancelApiKeyList: [], // 前提是全局开启取消请求或者对单独接口设置isCancelToken:true 由于Map中key定义规则为:url + 参数 data + 参数 params + method 作为key,但有些接口不需要参数来确定唯一key,例如:热搜索,其搜索参数为实时变化,因此只需要url+method作为Map中的唯一key即可
  size: 50, // 默认缓存大小 50条
  isRefreshToken: false, // 默认关闭刷新token机制
  headerTokenKey: 'Authorization', // 接口响应头需要携带token的字段默认为:Authorization
  tokenCode: [401,302], // token失效后的code状态,默认 401和302
  noRefreshUri: [], // 不需要refreshToken的uri
  cacheTimeout: 60 * 60 * 1000, // 缓存有效时长默认为 1个小时
  refreshToken(){ // refreshToken函数逻辑, 需要返回Promise,并且成功回调中需要传入刷新后的token。resolve(token)
    // 此处只是一个使用示例
    return 
  }
})

// 基于axios.interceptors.request.use()封装的请求拦截
window.apicacheInstance.interceptorsRequest(
  config => {
    return config
  },
  () => { // 异常回调处理,如果没有,则可以不传

  }
)
// 基于axios.interceptors.response.use()封装的响应拦截
window.apicacheInstance.interceptorsResponse( // 如果业务没有响应拦截处理,此方法可以无需定义
  response => {
    return Promise.resolve(response)
  },
  error => { // 异常回调处理,如果没有,则可以不传
    return Promise.reject(error)
  }
)

export default window.apicacheInstance