關於Vue2 SSR快取 Api 資料的方法

本篇文章主要介紹了Vue2 SSR 快取 Api 數據，內容挺不錯的，現在分享給大家，也給大家做個參考。

本文介紹了Vue2 SSR 快取Api 數據，分享給大家，如下：

1. 安裝快取依賴: lru-cache

##

npm install lru-cache --dev

2. 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

設定下lru-cache

##3. 封裝下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
    })
  }
}

ajax 函式庫我們用axios, 因為axios在nodejs 和瀏覽器都可以使用

#並且將node 端和瀏覽器端分開封裝

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

#

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

透過url 和參數, 產生一個唯一的key

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

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

判斷下是不是開啟了快取, 並且介面指定快取的話, 將api 回傳的資料, 寫入快取

注意:

#這個api 會處理所有的請求, 但是很多請求其實是不需要快取的, 所以需要快取可以在傳過來的data 裡, 新增個cache: true, 如:

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

不需要快取的直接按正常傳值即可

當然這裡標記是不是要快取的方法有很多, 不一定要用這一種

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ 相關推薦：

######實作簡單的vue無限載入指令的方法###############vue在腳手架中設定Sass的方法# ###########################

以上是關於Vue2 SSR快取 Api 資料的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！