摘要:需求請求接口之后,緩存當前接口的數據,下次請求同一接口時拿緩存數據,不再重新請求添加緩存失效時間使用來實現模塊與模塊的差異模塊輸出的是一個值的拷貝,模塊輸出的是值的引用。
需求:
請求接口之后,緩存當前接口的數據,下次請求同一接口時拿緩存數據,不再重新請求
添加緩存失效時間
cache使用map來實現ES6 模塊與 CommonJS 模塊的差異
CommonJS 模塊輸出的是一個值的拷貝,ES6 模塊輸出的是值的引用。
CommonJS 模塊是運行時加載,ES6 模塊是編譯時輸出接口。
因為esm輸出的是值的引用,直接就是單例模式了
詳細
export let cache = new Cache()版本1
思路:
在vuex注冊插件,插件會在每次mutations提交之后,判斷要不要寫入cache
在提交actions的時候判斷是否有cache,有就拿cache里面的數據,然后把數據commit給mutataios
注意: 在插件里面獲取的mutations-type是包含命名空間的,而在actions里面則是沒有命名空間,需要補全。
/mutation-types.js
/** * 需要緩存的數據會在mutations-type后面添加-CACHED */ export const SET_HOME_INDEX = "SET_HOME_INDEX-CACHED"
/modules/home/index.js
const actions = { /** * @description 如果有緩存,就返回把緩存的數據,傳入mutations, * 沒有緩存就從接口拿數據,存入緩存,把數據傳入mutations */ async fetchAction ({commit}, {mutationType, fetchData, oPayload}) { // vuex開啟了命名空間,所這里從cachekey要把命名空間前綴 + type + 把payload格式化成JSON const cacheKey = NAMESPACE + mutationType + JSON.stringify(oPayload) const cacheResponse = cache.get(cacheKey || "") if (!cacheResponse) { const [err, response] = await fetchData() if (err) { console.error(err, "error in fetchAction") return false } commit(mutationType, {response: response, oPayload}) } else { console.log("已經進入緩存取數據!??!") commit(mutationType, {response: cacheResponse, oPayload}) } }, loadHomeData ({ dispatch, commit }) { dispatch( "fetchAction", { mutationType: SET_HOME_INDEX, fetchData: api.index, } ) } } const mutations = { [SET_HOME_INDEX] (state, {response, oPayload}) {}, } const state = { indexData: {} } export default { namespaced: NAMESPACED, actions, state, getters, mutations }
編寫插件,在這里攔截mutations,判斷是否要緩存
/plugin/cache.js
import cache from "src/store/util/CacheOfStore" // import {strOfPayloadQuery} from "src/store/util/index" /** * 在每次mutations提交之后,把mutations-type后面有CACHED標志的數據存入緩存, * 現在key值是mutations-type * 問題: * 沒辦法區分不同參數query的請求, * * 方法1: 用每個mutations-type + payload的json格式為key來緩存數據 */ function cachePlugin () { return store => { store.subscribe(({ type, payload }, state) => { // 需要緩存的數據會在mutations-type后面添加CACHED const needCache = type.split("-").pop() === "CACHED" if (needCache) { // 這里的type會自動加入命名空間所以 cacheKey = type + 把payload格式化成JSON const cacheKey = type + JSON.stringify(payload && payload.oPayload) const cacheResponse = cache.get(cacheKey) // 如果沒有緩存就存入緩存 if (!cacheResponse) { cache.set(cacheKey, payload.response) } } console.log(cache) }) } } const plugin = cachePlugin() export default plugin
store/index.js
import Vue from "vue" import Vuex from "vuex" import home from "./modules/home" import cachePlugin from "./plugins/cache" Vue.use(Vuex) const store = new Vuex.Store({ modules: { home, editActivity, editGuide } plugins: [cachePlugin] }) export default store版本2
思路:
直接包裝fetch函數,在里面里面判斷是否需要緩存,緩存是否超時。
優化點:
把原本分散的cache操作統一放入到fetch
減少了對命名空間的操作
添加了緩存有效時間
/actions.js
const actions = { async loadHomeData ({ dispatch, commit }, oPayload) { commit(SET_HOME_LOADSTATUS) const [err, response] = await fetchOrCache({ api: api.index, queryArr: oPayload.queryArr, mutationType: SET_HOME_INDEX }) if (err) { console.log(err, "loadHomeData error") return [err, response] } commit(SET_HOME_INDEX, { response }) return [err, response] } }
/在fetchOrCache判斷是需要緩存,還是請求接口
/** * 用這個函數就說明是需要進入緩存 * @param {*} api 請求的接口 * @param {*} queryArr 請求的參數 * @param {*} mutationType 傳入mutationType作為cache的key值 */ export async function fetchOrCache ({api, queryArr, mutationType, diff}) { // 這里是請求接口 const fetch = httpGet(api, queryArr) const cachekey = `${mutationType}:${JSON.stringify(queryArr)}` if (cache.has(cachekey)) { const obj = cache.get(cachekey) if (cacheFresh(obj.cacheTimestemp, diff)) { return cloneDeep(obj) } else { // 超時就刪除 cache.delete(cachekey) } } // 不取緩存的處理 let response = await fetch() // 時間戳綁定在數組的屬性上 response.cacheTimestemp = Date.now() cache.set(cachekey, response) // 返回cloneDeep的對象 return cloneDeep(response) } /** * 判斷緩存是否失效 * @param {*} diff 失效時間差,默認15分鐘=900s */ const cacheFresh = (cacheTimestemp, diff = 900) => { if (cacheTimestemp) { return ((Date.now() - cacheTimestemp) / 1000) <= diff } else { return true } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107807.html
摘要:哪吒別人的看法都是狗屁,你是誰只有你自己說了才算,這是爹教我的道理。哪吒去他個鳥命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運,我不曉得。我只曉得,不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要:記錄下我遇到的面試題,都有大佬分享過,附上各個大佬的文章,總結出其中的主要思想即可。推薦黑金團隊的文章前端緩存最佳實踐推薦名揚的文章淺解強緩存和協商緩存狀態碼重點是等,要給面試官介紹清楚。前言 在這互聯網的寒冬臘月時期,雖說過了金三銀四,但依舊在招人不斷。更偏向于招聘高級開發工程師。本人在這期間求職,去了幾家創業,小廠,大廠廝殺了一番,也得到了自己滿意的offer。 整理一下自己還記得的面試...
摘要:用開發仿旅游站項目總結上該說的話,該表明的上篇已經表明了。之后的路由切換不再請求數據是因為組件內容是從內存取了不會再重新創建了,對應的鉤子函數不會再執行了。此時,通過新增的生命周期鉤子函數以及這個緩存值就實現了我們要的功能了。 用Vue開發仿旅游站webapp項目總結 (上)該說的話,該表明的上篇已經表明了。謝謝上篇評論區一些同學~ 很鼓勵我,不過下下篇估計沒了,這篇總結完,下下篇可...
摘要:用開發仿旅游站項目總結上該說的話,該表明的上篇已經表明了。之后的路由切換不再請求數據是因為組件內容是從內存取了不會再重新創建了,對應的鉤子函數不會再執行了。此時,通過新增的生命周期鉤子函數以及這個緩存值就實現了我們要的功能了。 用Vue開發仿旅游站webapp項目總結 (上)該說的話,該表明的上篇已經表明了。謝謝上篇評論區一些同學~ 很鼓勵我,不過下下篇估計沒了,這篇總結完,下下篇可...
閱讀 1995·2021-11-23 10:08
閱讀 2325·2021-11-22 15:25
閱讀 3269·2021-11-11 16:55
閱讀 763·2021-11-04 16:05
閱讀 2575·2021-09-10 10:51
閱讀 704·2019-08-29 15:38
閱讀 1573·2019-08-29 14:11
閱讀 3480·2019-08-29 12:42