axios请求缓存

archieyang 发布于2019-08-26 11:38 / 3190人阅读

摘要：源代码数据存储建立唯一的值缓存建议只给加缓存建立索引对象是引用，为了防止污染数据源同时发送多次一样的请求，没办法防止污染数据源，只有业务中去实现例如获取列表是否永久保留在本地，默认为注意点不建议将设置成疑难解答问为什么不建议永久储存在本

源代码

import axios from "axios"

// 数据存储
export const cache = {
  data: {},
  set (key, data, bol = false) {
    if (bol) {
      localStorage.setItem(key, JSON.stringify(data))
    } else {
      this.data[key] = data
    }
  },
  get (key, bol = false) {
    if (bol) {
      return JSON.parse(localStorage.getItem(key))
    } else {
      return this.data[key]
    }
  },
  clear (key, bol = false) {
    if (bol) {
      localStorage.removeItem(key)
    } else {
      delete this.data[key]
    }
  }
}

// 建立唯一的key值
function buildUrl (url, params = {}) {
  const sortedParams = Object.keys(params).sort().reduce((result, key) => {
    result[key] = params[key]
    return result
  }, {})

  url += `?${JSON.stringify(sortedParams)}`
  return url
}

// 缓存,建议只给get加缓存
export default (options = {}) => config => {
  const { url, method, params, data } = config
  const { local = false } = options
  // 建立索引
  let index
  if (method === "get") {
    index = buildUrl(url, params)
  } else {
    index = buildUrl(url, data)
  }
  const indexData = index + "-data"
  let response = cache.get(indexData, local)
  let responsePromise = cache.get(index)
  if (response) {
    return Promise.resolve(JSON.parse(JSON.stringify(response))) // 对象是引用，为了防止污染数据源
  } else if (!responsePromise) {
    responsePromise = (async () => {
      try {
        const response = await axios.defaults.adapter(config)
        cache.set(indexData, response, local)
        return Promise.resolve(JSON.parse(JSON.stringify(response))) // 同时发送多次一样的请求，没办法防止污染数据源，只有业务中去实现
      } catch (reason) {
        cache.clear(index, local)
        cache.clear(indexData)
        return Promise.reject(reason)
      }
    })()

    // put the promise for the non-transformed response into cache as a placeholder
    cache.set(index, responsePromise)
  }
  return responsePromise
}

API

例如

import axios from "axios"
import cache from "./cache"
 
// 获取列表
export async function getListData (payload) {
  return axios.get("/Thermodynamic", {
    params: payload,
    adapter: cache({
      local: false // 是否永久保留在本地，默认为false
    })
  })
}

注意点

不建议将local设置成true

疑难解答

问：为什么不建议永久储存在本地
答：储存在内存中，能保证每次刷新浏览器，加载的都是最新数据；储存在本地，拿不到最新数据；如果需要做到储存在本地，可把每一次数据设置一个版本号，进入应用时向后台发送一个请求，来判断当前请求得到的版本号是否与储存的版本号一致

备注：如果对你有帮助，请帮忙点个赞

GPU云服务器云服务器 ajax请求数据缓存 cdn缓存post请求吗 axios axios cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107280.html

vue axios不缓存get请求(防止返回304不更新数据)

摘要：最近做项目遇到一款浏览器，由于缓存了请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法解决思路就是给每一条请求增加一个的参数，为时间戳但是我们又不想每次请求都加上，所以希望全局配置。最近做项目遇到一款浏览器，由于缓存了get请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数，value为时间戳...

jayzou 2019-08-02 14:28 评论0 收藏0
vue axios不缓存get请求(防止返回304不更新数据)

摘要：最近做项目遇到一款浏览器，由于缓存了请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法解决思路就是给每一条请求增加一个的参数，为时间戳但是我们又不想每次请求都加上，所以希望全局配置。最近做项目遇到一款浏览器，由于缓存了get请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数，value为时间戳...

lykops 2019-08-26 13:32 评论0 收藏0
Ajax详解

摘要：当请求完成后注册一个回调函数。该请求是否触发全局处理事件如等，请求发送前的回调函数，用来修改请求发送前，此功能可用来设置自定义头信息，在函数中返回将取消这个请求。例如，为请求指定一个回调函数名。即改变回调函数的，默认就是传入的整个对象。 Ajax Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客...

jokester 2019-08-23 14:15 评论0 收藏0
webpack4系列教程（六）：使用SplitChunksPlugin分割代码

摘要：在默认情况下，仅仅影响按需加载的代码块，因为更改初始块会影响文件应包含的脚本标记以运行项目。属性用来选择分割哪些代码块，可选值有所有代码块，按需加载的代码块，初始化代码块。 1. SplitChunksPlugin的概念起初，chunks(代码块)和导入他们中的模块通过webpack内部的父子关系图连接.在webpack3中，通过CommonsChunkPlugin来避免他们之间的依...

golden_hamster 2019-08-02 14:06 评论0 收藏0
webpack4系列教程（六）：使用SplitChunksPlugin分割代码

摘要：在默认情况下，仅仅影响按需加载的代码块，因为更改初始块会影响文件应包含的脚本标记以运行项目。属性用来选择分割哪些代码块，可选值有所有代码块，按需加载的代码块，初始化代码块。 1. SplitChunksPlugin的概念起初，chunks(代码块)和导入他们中的模块通过webpack内部的父子关系图连接.在webpack3中，通过CommonsChunkPlugin来避免他们之间的依...

cocopeak 2019-08-23 14:42 评论0 收藏0