Informationen zur Methode zum Zwischenspeichern von API-Daten durch Vue2 SSR

In diesem Artikel werden hauptsächlich Vue2-SSR-Cache-API-Daten vorgestellt. Der Inhalt ist ziemlich gut. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

In diesem Artikel werden die Vue2 SSR-Cache-API-Daten vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

1. Cache-Abhängigkeit installieren: lru-cache

npm install lru-cache --dev

2. API-Konfigurationsdatei

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

LRU-Cache konfigurieren

3. Kapseln Sie die 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
    })
  }
}

Wir verwenden Axios für die Ajax-Bibliothek, da Axios in NodeJS und Browsern verwendet werden können

Und kapseln Sie die Knotenseite und die Browserseite separat

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

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

Generieren Sie a durch URL und Parameter Der einzige Schlüssel

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

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

Bestimmen Sie, ob der Cache aktiviert ist und ob die Schnittstelle Gibt den Cache an, dann werden die von der API zurückgegebenen Daten in den Cache geschrieben

Hinweis:

Diese API verarbeitet alle Anfragen, viele Anfragen jedoch Es muss nicht wirklich zwischengespeichert werden. Wenn Sie also zwischenspeichern müssen, können Sie den übergebenen Daten den Wert „cache: true“ hinzufügen, z Muss nicht zwischengespeichert werden, übergeben Sie den Wert einfach wie gewohnt

Natürlich gibt es viele Möglichkeiten zu markieren, ob zwischengespeichert werden soll, Sie müssen diese nicht verwenden

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So implementieren Sie einfache Anweisungen zum unendlichen Laden von Vue

So konfigurieren Sie Sass im Vue-Gerüst

Das obige ist der detaillierte Inhalt vonInformationen zur Methode zum Zwischenspeichern von API-Daten durch Vue2 SSR. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!