成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

axios請(qǐng)求緩存

archieyang / 3280人閱讀

摘要：源代碼數(shù)據(jù)存儲(chǔ)建立唯一的值緩存建議只給加緩存建立索引對(duì)象是引用，為了防止污染數(shù)據(jù)源同時(shí)發(fā)送多次一樣的請(qǐng)求，沒(méi)辦法防止污染數(shù)據(jù)源，只有業(yè)務(wù)中去實(shí)現(xiàn)例如獲取列表是否永久保留在本地，默認(rèn)為注意點(diǎn)不建議將設(shè)置成疑難解答問(wèn)為什么不建議永久儲(chǔ)存在本

源代碼 
import axios from "axios"

// 數(shù)據(jù)存儲(chǔ)
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))) // 對(duì)象是引用，為了防止污染數(shù)據(jù)源
  } 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))) // 同時(shí)發(fā)送多次一樣的請(qǐng)求，沒(méi)辦法防止污染數(shù)據(jù)源，只有業(yè)務(wù)中去實(shí)現(xiàn)
      } 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 // 是否永久保留在本地，默認(rèn)為false
    })
  })
}
注意點(diǎn)

不建議將local設(shè)置成true

疑難解答

問(wèn)：為什么不建議永久儲(chǔ)存在本地
答：儲(chǔ)存在內(nèi)存中，能保證每次刷新瀏覽器，加載的都是最新數(shù)據(jù)；儲(chǔ)存在本地，拿不到最新數(shù)據(jù)；如果需要做到儲(chǔ)存在本地，可把每一次數(shù)據(jù)設(shè)置一個(gè)版本號(hào)，進(jìn)入應(yīng)用時(shí)向后臺(tái)發(fā)送一個(gè)請(qǐng)求，來(lái)判斷當(dāng)前請(qǐng)求得到的版本號(hào)是否與儲(chǔ)存的版本號(hào)一致

備注：如果對(duì)你有幫助，請(qǐng)幫忙點(diǎn)個(gè)贊

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107280.html

相關(guān)文章

  • vue axios不緩存get請(qǐng)求(防止返回304不更新數(shù)據(jù))

    摘要：最近做項(xiàng)目遇到一款瀏覽器，由于緩存了請(qǐng)求，導(dǎo)致不管如何刷新，數(shù)據(jù)都不更新的問(wèn)題。以下分享一下解決辦法解決思路就是給每一條請(qǐng)求增加一個(gè)的參數(shù)，為時(shí)間戳但是我們又不想每次請(qǐng)求都加上，所以希望全局配置。 最近做項(xiàng)目遇到一款瀏覽器，由于緩存了get請(qǐng)求，導(dǎo)致不管如何刷新，數(shù)據(jù)都不更新的問(wèn)題。以下分享一下解決辦法:解決思路就是給每一條get請(qǐng)求增加一個(gè)timestamp的參數(shù)，value為時(shí)間戳...

    jayzou 評(píng)論0 收藏0

  • vue axios不緩存get請(qǐng)求(防止返回304不更新數(shù)據(jù))

    摘要：最近做項(xiàng)目遇到一款瀏覽器，由于緩存了請(qǐng)求，導(dǎo)致不管如何刷新，數(shù)據(jù)都不更新的問(wèn)題。以下分享一下解決辦法解決思路就是給每一條請(qǐng)求增加一個(gè)的參數(shù)，為時(shí)間戳但是我們又不想每次請(qǐng)求都加上，所以希望全局配置。 最近做項(xiàng)目遇到一款瀏覽器，由于緩存了get請(qǐng)求，導(dǎo)致不管如何刷新，數(shù)據(jù)都不更新的問(wèn)題。以下分享一下解決辦法:解決思路就是給每一條get請(qǐng)求增加一個(gè)timestamp的參數(shù)，value為時(shí)間戳...

    lykops 評(píng)論0 收藏0

  • Ajax詳解

    摘要：當(dāng)請(qǐng)求完成后注冊(cè)一個(gè)回調(diào)函數(shù)。該請(qǐng)求是否觸發(fā)全局處理事件如等，請(qǐng)求發(fā)送前的回調(diào)函數(shù)，用來(lái)修改請(qǐng)求發(fā)送前，此功能可用來(lái)設(shè)置自定義頭信息，在函數(shù)中返回將取消這個(gè)請(qǐng)求。例如，為請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的，默認(rèn)就是傳入的整個(gè)對(duì)象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語(yǔ)言，可以說(shuō)是已有技術(shù)的組合，主要用來(lái)實(shí)現(xiàn)客...

    jokester 評(píng)論0 收藏0

  • webpack4系列教程（六）：使用SplitChunksPlugin分割代碼

    摘要：在默認(rèn)情況下，僅僅影響按需加載的代碼塊，因?yàn)楦某跏級(jí)K會(huì)影響文件應(yīng)包含的腳本標(biāo)記以運(yùn)行項(xiàng)目。屬性用來(lái)選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。 1.?SplitChunksPlugin的概念 起初，chunks(代碼塊)和導(dǎo)入他們中的模塊通過(guò)webpack內(nèi)部的父子關(guān)系圖連接.在webpack3中，通過(guò)CommonsChunkPlugin來(lái)避免他們之間的依...

    golden_hamster 評(píng)論0 收藏0

  • webpack4系列教程（六）：使用SplitChunksPlugin分割代碼

    摘要：在默認(rèn)情況下，僅僅影響按需加載的代碼塊，因?yàn)楦某跏級(jí)K會(huì)影響文件應(yīng)包含的腳本標(biāo)記以運(yùn)行項(xiàng)目。屬性用來(lái)選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。 1.?SplitChunksPlugin的概念 起初，chunks(代碼塊)和導(dǎo)入他們中的模塊通過(guò)webpack內(nèi)部的父子關(guān)系圖連接.在webpack3中，通過(guò)CommonsChunkPlugin來(lái)避免他們之間的依...

    cocopeak 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<