資訊專欄INFORMATION COLUMN
摘要：源代碼數(shù)據(jù)存儲建立唯一的值緩存建議只給加緩存建立索引對象是引用，為了防止污染數(shù)據(jù)源同時發(fā)送多次一樣的請求，沒辦法防止污染數(shù)據(jù)源，只有業(yè)務(wù)中去實現(xiàn)例如獲取列表是否永久保留在本地，默認為注意點不建議將設(shè)置成疑難解答問為什么不建議永久儲存在本
源代碼
import axios from "axios"
// 數(shù)據(jù)存儲
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))) // 對象是引用，為了防止污染數(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))) // 同時發(fā)送多次一樣的請求，沒辦法防止污染數(shù)據(jù)源，只有業(yè)務(wù)中去實現(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 // 是否永久保留在本地，默認為false
})
})
}
注意點
不建議將local設(shè)置成true
疑難解答問：為什么不建議永久儲存在本地
答：儲存在內(nèi)存中，能保證每次刷新瀏覽器，加載的都是最新數(shù)據(jù)；儲存在本地，拿不到最新數(shù)據(jù)；如果需要做到儲存在本地，可把每一次數(shù)據(jù)設(shè)置一個版本號，進入應(yīng)用時向后臺發(fā)送一個請求，來判斷當前請求得到的版本號是否與儲存的版本號一致
備注：如果對你有幫助，請幫忙點個贊
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107280.html
摘要：最近做項目遇到一款瀏覽器，由于緩存了請求，導致不管如何刷新，數(shù)據(jù)都不更新的問題。以下分享一下解決辦法解決思路就是給每一條請求增加一個的參數(shù)，為時間戳但是我們又不想每次請求都加上，所以希望全局配置。 最近做項目遇到一款瀏覽器，由于緩存了get請求，導致不管如何刷新，數(shù)據(jù)都不更新的問題。以下分享一下解決辦法:解決思路就是給每一條get請求增加一個timestamp的參數(shù)，value為時間戳...
摘要：最近做項目遇到一款瀏覽器，由于緩存了請求，導致不管如何刷新，數(shù)據(jù)都不更新的問題。以下分享一下解決辦法解決思路就是給每一條請求增加一個的參數(shù)，為時間戳但是我們又不想每次請求都加上，所以希望全局配置。 最近做項目遇到一款瀏覽器，由于緩存了get請求，導致不管如何刷新，數(shù)據(jù)都不更新的問題。以下分享一下解決辦法:解決思路就是給每一條get請求增加一個timestamp的參數(shù)，value為時間戳...
摘要：當請求完成后注冊一個回調(diào)函數(shù)。該請求是否觸發(fā)全局處理事件如等，請求發(fā)送前的回調(diào)函數(shù)，用來修改請求發(fā)送前，此功能可用來設(shè)置自定義頭信息，在函數(shù)中返回將取消這個請求。例如，為請求指定一個回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的，默認就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術(shù)的組合，主要用來實現(xiàn)客...
摘要：在默認情況下，僅僅影響按需加載的代碼塊，因為更改初始塊會影響文件應(yīng)包含的腳本標記以運行項目。屬性用來選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。 1.?SplitChunksPlugin的概念 起初，chunks(代碼塊)和導入他們中的模塊通過webpack內(nèi)部的父子關(guān)系圖連接.在webpack3中，通過CommonsChunkPlugin來避免他們之間的依...
摘要：在默認情況下，僅僅影響按需加載的代碼塊，因為更改初始塊會影響文件應(yīng)包含的腳本標記以運行項目。屬性用來選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。 1.?SplitChunksPlugin的概念 起初，chunks(代碼塊)和導入他們中的模塊通過webpack內(nèi)部的父子關(guān)系圖連接.在webpack3中，通過CommonsChunkPlugin來避免他們之間的依...
閱讀 2913·2021-10-14 09:42
閱讀 1262·2021-09-24 10:32
閱讀 2980·2021-09-23 11:21
閱讀 2859·2021-08-27 13:10
閱讀 3346·2019-08-29 18:41
閱讀 2208·2019-08-29 15:16
閱讀 1218·2019-08-29 13:17
閱讀 903·2019-08-29 11:22
