À propos de la méthode de mise en cache des données API de Vue2 SSR

Cet article présente principalement les données de l'API du cache Vue2 SSR. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Cet article présente les données de l'API du cache Vue2 SSR et les partage avec tout le monde. Les détails sont les suivants :

1. Installer les dépendances du cache : lru-cache

npm install lru-cache --dev

2. Fichier de configuration de l'API

config-server.js

var LRU = require('lru-cache')

let api
if (process.__API__) {
  api = process.__API__
} else {
  api = process.__API__ = {
    api: 'http://localhost:8080/api/',
    cached: LRU({
      max: 1000,
      maxAge: 1000 * 60 * 15
    }),
    cachedItem: {}
  }
}

module.exports = api

configurer lru-cache

3. Encapsuler l'API

import axios from 'axios'
import qs from 'qs'
import md5 from 'md5'
import config from './config-server.js'

export default {
  post(url, data) {
    const key = md5(url + JSON.stringify(data))
    if (config.cached && config.cached.has(key)) {
      return Promise.resolve(config.cached.get(key))
    }
    return axios({
      method: 'post',
      url: config.api + url,
      data: qs.stringify(data),
      // 其他配置
    }).then(res => {
      if (config.cached && data.cache) config.cached.set(key, res)
      return res
    })
  }
}

Nous utilisons axios pour la bibliothèque ajax, car axios peut être utilisé dans nodejs et navigateurs

Et encapsulez séparément le côté nœud et le côté navigateur

import config from './config-server.js'

const key = md5(url + JSON.stringify(data))

Générer une clé unique via l'URL et les paramètres

if (config.cached && config.cached.has(key)) {
  return Promise.resolve(config.cached.get(key))
}

if (config.cached && data.cache) config.cached.set(key, res)

Juge Vérifiez si le cache est activé, et si l'interface spécifie le cache, écrivez les données renvoyées par l'API dans le cache

Remarque :

Cette API gérera toutes les requêtes, mais de nombreuses requêtes n'ont pas réellement besoin d'être mises en cache, donc si vous avez besoin de mettre en cache, vous pouvez ajouter cache: true dans les données transmises, telles que :

api.post('/api/test', {a: 1, b:2, cache: true})

Si vous n'avez pas besoin de mettre en cache, transmettez simplement la valeur comme d'habitude

Bien sûr, il existe de nombreuses façons de marquer s'il faut mettre en cache, vous ne le faites pas Je n'ai pas besoin d'utiliser celui-ci

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter des instructions de chargement simples avec Vue Infinite

Comment configurer Sass dans l'échafaudage Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!