axios請求緩存

archieyang 發布于2019-08-26 11:38 / 3191人閱讀

摘要：源代碼數據存儲建立唯一的值緩存建議只給加緩存建立索引對象是引用，為了防止污染數據源同時發送多次一樣的請求，沒辦法防止污染數據源，只有業務中去實現例如獲取列表是否永久保留在本地，默認為注意點不建議將設置成疑難解答問為什么不建議永久儲存在本

源代碼

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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