Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is the method of front-end api request caching". In daily operation, I believe many people have doubts about the method of front-end api request caching. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the method of front-end api request caching?" Next, please follow the editor to study!

Scheme 1. Data caching

A simple data cache that fetches the data on the first request and then uses the data instead of requesting the back-end api.

The code is as follows:

Const dataCache = new Map () async getWares () {let key = 'wares' / / get data from data cache let data = dataCache.get (key) if (! data) {/ / there is no data request server const res = await request.get (' / getWares') / / other operations. Data =. / / set data cache dataCache.set (key, data)} return data}

The first line of code uses Map above es6. If you don't understand map very well, you can refer to

ECMAScript 6 introduction to Set and Map or Exploring ES6 introduction to map and set, which can be understood here as a key-value pair storage structure.

The code then uses the async function to make asynchronous operations more convenient. You can refer to the ECMAScript 6 getting started async function to learn or consolidate your knowledge.

The code itself is easy to understand, caching the data using the Map object and then calling to fetch the data from the Map object. For very simple business scenarios, you can just take advantage of this code.

Call method:

GetWares (). Then (...) / / the second call gets the previous data getWares (). Then (...)

Option 2. Promise caching

Option one itself is inadequate. Because if you consider calling this api more than two times at the same time, a second request api will be made because the request did not return.

Of course, it's not likely to encounter this problem if you add a single data source framework such as vuex and redux to your system, but sometimes we encounter this scenario when we want to call api separately in each complex component instead of communicating data between components.

Const promiseCache = new Map () getWares () {const key = 'wares' let promise = promiseCache.get (key) / / the promise if (! promise) {promise = request.get ('/ getWares') .then (res = > {/ / a pair of res operations...}) .catch (error = > {/ / if there is a problem after the request comes back) is not available in the current res cache. Remove promise from cache to avoid continuing errors in the second request S promiseCache.delete (key) return Promise.reject (error)})} / / return promise return promise}

This code avoids the problem of multiple requests at the same time in scenario 1. At the same time, the promise is deleted when there is an error in the backend, so that there will be no problem that the wrong promise will always go wrong.

Call method:

GetWares (). Then (...) / / the second call gets the previous promise getWares (). Then (...)

Solution 3. Multi-promise caching

In this scheme, more than one api request is needed at the same time, and the data is returned at the same time, if an error occurs in an api.

No correct data is returned.

Const querys = {wares: 'getWares', skus:' getSku'} const promiseCache = new Map () async queryAll (queryApiName) {/ / determine whether the incoming data is an array const queryIsArray = Array.isArray (queryApiName) / / unified processing data, whether it is a string or an array is regarded as an array const apis = queryIsArray? QueryApiName: [queryApiName] / / get all request services const promiseApi = [] apis.forEach (api = > {/ / use promise let promise = promiseCache.get (api) if (promise) {/ / if there is in the cache Direct push promise.push (promise)} else {promise = request.get (querys [API]). Then (res = > {/ / a pair of res to operate.}) .catch (error = > {/ / if there is a problem after the request comes back Delete promise from cache promiseCache.delete (api) return Promise.reject (error)}) promiseCache.set (api, promise) promiseCache.push (promise)}}) return Promise.all (promiseApi) .then (res = > {/ / return data based on whether it is a string or an array Because it is an array operation / / if you pass in a string, you need to take out the operation return queryIsArray? Res: res [0]})}

This scheme is a way to obtain data from multiple servers at the same time. Multiple data can be obtained for operation at the same time without errors due to problems with a single data.

Call method:

QueryAll ('wares'). Then (...) / / the second call will not fetch wares, but will only go to skus queryAll ([' wares', 'skus']) .then (.)

Option 4. Add time-related caches

Cache is often harmful, if we know that the data has been modified, we can just delete the cache, then we can call the method to request to the server.

In this way, we avoid displaying the old data at the front end. But we may not manipulate the data for a while, so the old data always exists, so we'd better set a time to remove the data.

In this scheme, class persistence data is used to do data cache, while expired data and parameterization are added.

The code is as follows:

First define a persistence class, which can store promise or data

Class ItemCache () {construct (data, timeout) {this.data = data / / set the timeout, set it to the number of seconds this.timeout = timeout / / the time when the object was created, approximately set to the time of data acquisition this.cacheTime = (new Date ()) .getTime}}

Then we define the data cache. We use basically the same api as Map.

Class ExpriesCache {/ / define static data map as cache pool static cacheMap = new Map () / / whether the data timeout static isOverTime (name) {const data = ExpriesCache.cacheMap.get (name) / / No data must time out if (! data) timeout / / get the current timestamp of the system Const currentTime = (new Date ()) .getTime () / get the past seconds of the current time and the storage time const overTime = (currentTime-data.cacheTime) / 1000 / / if the past seconds are greater than the current timeout Also return null to go to the server to fetch data if (Math.abs (overTime) > data.timeout) {/ / this code can be absent and there will be no problem, but if you have this code, entering the method again can reduce judgment. ExpriesCache.cacheMap.delete (name) return true} / / No timeout return false} / / whether the current data timed out in cache static has (name) {return! ExpriesCache.isOverTime (name)} / / Delete data static delete (name) {return ExpriesCache.cacheMap.delete ( Name)} / / get static get (name) {const isDataOverTiem = ExpriesCache.isOverTime (name) / / if the data times out Returns null, but no timeout, returns data instead of the ItemCache object return isDataOverTiem? Null: ExpriesCache.cacheMap.get (name) .data} / / default storage 20 minutes static set (name, data, timeout = 1200) {/ / set itemCache const itemCache = mew ItemCache (data, timeout) / / cache ExpriesCache.cacheMap.set (name, itemCache)}}

At this point, the data class and the operation class have been defined, which we can define in the api layer.

/ / generate key value error const generateKeyError = new Error ("Can't generate key from name and argument") / / generate key value function generateKey (name, argument) {/ / get data from arguments and change to array const params = Array.from (argument) .join (',') try {/ / return string Function name + function parameter return `${name}: ${params}`} catch (_) {/ / return generate key error return generateKeyError}} async getWare (params1, params2) {/ / generate key const key = generateKey ('getWare', [params1) Params2]) / / get data let data = ExpriesCache.get (key) if (! data) {const res = await request ('/ getWares', {params1, params2}) / / use 10s cache After 10 seconds, get will get the null and continue to request ExpriesCache.set (key, res, 10)} return data} from the server.

This scheme uses caching because of different expiration time and api parameters. It can already meet most of the business scenarios.

Call method:

GetWares (1Magol 2). Then (...) / / the second call gets the previous promise getWares (1Magne2). Then (...) / / different parameters, do not take the previous promise getWares (1Magne3). Then (...)

Option 5. Scheme 4 based on modifiers

It is consistent with the solution of scheme 4, but it is based on the modifier.

The code is as follows:

/ / generate key value error const generateKeyError = new Error ("Can't generate key from name and argument") / / generate key value function generateKey (name, argument) {/ / get data from arguments and change it to array const params = Array.from (argument) .join (' ') try {/ / return string return `${name}: ${params}`} catch (_) {return generateKeyError}} function decorate (handleDescription, entryArgs) {/ / determine whether the current last data is descriptor In the case of descriptor, directly use the modifier if (isDescriptor (entryArgs [entryArgs. Length-1]) {return handleDescription (. EntryArgs), such as log. [])} else {/ / if not / / modifiers such as add (1) plus (20) return function () {return handleDescription (... Array.protptype.slice.call (arguments), entryArgs)} function handleApiCache (target, name, descriptor ) config) {/ / get the function body and save const fn = descriptor.value / / modify the function body descriptor.value = function () {const key = generateKey (name, arguments) / / key cannot be generated Directly request server data if (key = generateKeyError) {/ / request return fn.apply (null, arguments)} let promise = ExpriesCache.get (key) if (! promise) {/ / set promise promise = fn.apply (null) Arguments) .catch (error = > {/ / after the request comes back If there is a problem, delete promise from cache ExpriesCache.delete (key) / / return error return Promise.reject (error)}) / / use 10s cache After 10 seconds, get will get null again and continue to request ExpriesCache.set (key, promise, config [0])} return promise} return descriptor from the server. } / / make modifier function ApiCache (... args) {return decorate (handleApiCache, args)}

At this point, we will use classes to cache api

Class Api {/ / cache 10s @ ApiCache (10) / / do not use the default value at this time, because the current modifier cannot get getWare (params1, params2) {return request.get ('/ getWares')}}

Because there is a function promotion in the function, there is no way to use the function as a modifier

For example:

Var counter = 0; var add = function () {counter++;}; @ add function foo () {}

The intention of the code is that counter equals 1 after execution, but the actual result is that counter equals 0. Because the function is improved, the actual executed code is as follows

@ add function foo () {} var counter; var add; counter = 0; add = function () {counter++;}

So there is no way to use modifiers on functions. For more information, please see ECMAScript 6 getting started Decorator.

This way of writing is simple and does not have much impact on the business layer. However, the cache time cannot be modified dynamically.

Calling mode

GetWares (1Magne2). Then (...) / / the second call gets the previous promise getWares (1Magne2). Then (...) / / different parameters, do not take the previous promise getWares (1p3). Then (...) so far, the study on "what is the method of front-end api request caching" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.