首頁 > web前端 > js教程 > 主體

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

不言
發布: 2018-06-29 16:15:10
原創
1734 人瀏覽過

本篇文章主要介紹了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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板