Vue2 SSRのAPIデータキャッシュ方法について

この記事は主に Vue2 SSR キャッシュ API データを紹介します。内容が非常に優れているので、参考として共有します。

この記事では、Vue2 SSR キャッシュ API データを紹介し、それを皆さんと共有します。詳細は次のとおりです:

1. キャッシュ依存関係をインストールします: lru-cache

npm install lru-cache --dev

2. API 設定ファイル

.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 を設定します

3. axios は、nodejs とブラウザーで使用できるため、axios を使用します

。ノードを接続するブラウザ側 末端は個別にカプセル化されます

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
    })
  }
}

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

URLとパラメータを通じて一意のキーを生成します

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

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

インターフェイスはキャッシュを指定し、API によって返されたデータをキャッシュに書き込みます

注:

この API はすべてのリクエストを処理しますが、多くのリクエストは実際にはキャッシュする必要がないため、必要に応じてキャッシュする必要があります。キャッシュする場合は、cache: true を追加できます。例:

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

キャッシュが必要ない場合は、通常どおり値を渡すだけです

もちろん、キャッシュするかどうかをマークする方法はたくさんあります。 、これを使用する必要はありません

以上です。これが皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

簡単な vue 無限ロード命令を実装する方法

vue スキャフォールディングで Sass を設定する方法

以上がVue2 SSRのAPIデータキャッシュ方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。