Vue2 SSR이 API 데이터를 캐싱하는 방법에 대해

이 글은 주로 Vue2 SSR 캐시 Api 데이터를 소개하고 있는데, 내용이 꽤 괜찮아서 참고용으로 올려봅니다.

이 글에서는 Vue2 SSR 캐시 API 데이터를 소개하고 이를 모든 사람과 공유합니다.

1. 캐시 종속성 설치: lru-cache

npm install lru-cache --dev

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

Configure lru-cache

3. axios를 nodejs 및 브라우저

에서 사용할 수 있으므로 axios를 사용합니다. 끝은 URL과 매개변수를 통해 별도로 캡슐화되어

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'

고유 키를 생성합니다.

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

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

활성화됨 인터페이스는 캐시를 지정하고 API가 반환한 데이터를 캐시에 씁니다

참고:

이 API는 모든 요청을 처리하지만 많은 요청은 실제로 캐시할 필요가 없습니다. 캐시, 캐시를 추가할 수 있습니다: true, 예:

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

캐싱이 필요하지 않은 경우 값을 일반으로 전달할 수 있습니다

물론 캐시 여부를 표시하는 방법은 여러 가지가 있습니다. , 꼭 이 글을 쓰실 필요는 없습니다

이상으로 이 글의 내용이 모두의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장 사항:

간단한 vue 무한 로딩 지침을 구현하는 방법

vue 스캐폴딩에서 Sass를 구성하는 방법

위 내용은 Vue2 SSR이 API 데이터를 캐싱하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!