基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)

import LRUCache from 'lru-cache'

const cache = new LRUCache({
 maxAge: 1000 * 60 * 2, // 有效期2分钟
 max: 1000 // 最大缓存数量
})

export default function(req, res, next) {
 // 本地开发环境不做页面缓存
 if (process.env.NODE_ENV !== 'development') {
 try {
  const cacheKey = req.url
  const cacheData = cache.get(cacheKey)
  if (cacheData) {
  return res.end(cacheData, 'utf8')
  }
  const originalEnd = res.end
  res.end = function(data) {
  cache.set(cacheKey, data)
  originalEnd.call(res, ...arguments)
  }
 } catch(error) {
  // console.log(`page-cache-middleware: ${error}`)
  next()
 }
 }
 next()
}

// ～/plugins/axios/createCacheKey.js

import md5 from 'md5'

/**
 * 根据请求配置，是否是请求拦截器 创建缓存key
 * @param {Object} config
 * @param {Boolean} isRequest 
 */

export default function createCacheKey(
 config = {},
 isRequest = false
) {
 const {
 url,
 data,
 params,
 method,
 baseURL,
 } = config || {}

 let commonUrl = url

 /**
 * request拦截器中config.url是未拼接baseURL的，response拦截器中response.config.url是拼接过baseURL的，
 * 为了保持统一，使用统一拼接baseURL的commonUrl；注意下面的if条件判断
 */
 if (isRequest && !commonUrl.match(baseURL) && !commonUrl.match(/^https?/)) {
 commonUrl = !!baseURL.match(/.+\/$/) ? `${baseURL.replace(/\/$/, '')}${url}` : `${baseURL}${url}`
 }

 // 根据请求指令，url，body体，参数生成规则
 const rule = `method=${method}-url=${commonUrl}-data=${JSON.stringify(data || {})}-params=${JSON.stringify(params || {})}`

 // md5加密
 return md5(rule)
}

import LRUCache from 'lru-cache'
import axios from 'axios'
import globalConfig from '../../global-config'
import createCacheKey from './createCacheKey'

const cache = new LRUCache({
 maxAge: 1000 * 60, // 有效期60秒，如果存在页面缓存，api缓存的时间应该比页面缓存的时间小，这样是为了让api响应的内容保持最新
 max: 1000 // 最大缓存数量
})

/**
 * matchCacheCondition 是否满足持久化缓存条件：服务端运行时 && 非本地开发环境 && api请求为get请求方式
 * @param {Object} config 请求配置
 */
function matchCacheCondition(config = {}) {
 return process.server && process.env.NODE_ENV !== 'development' && config.method.toLowerCase() === 'get'
}

/**
 * 如果所有页面都启用了缓存，api缓存就没有必要了
 */
export default function({ $axios, redirect }) {
 $axios.interceptors.request.use(config => {
 const { baseUrl } = globalConfig
 config.baseURL = baseUrl[process.env.environment] || baseUrl['other']

 // 不满足缓存条件直接return config
 if (!matchCacheCondition(config)) {
  return config
 }

 const cacheKey = createCacheKey(config, true)
 const cacheData = cache.get(cacheKey)

 if (cacheData) {
  const source = axios.CancelToken.source()
  config.cancelToken = source.token
  source.cancel({ cacheData, cacheKey, url: config.url })
  return config
 }

 return config
 })

 $axios.interceptors.response.use(response => {
 if (matchCacheCondition(response.config)) {
  cache.set(createCacheKey(response.config), response)
 }
 return response
 }, (error) => {
 if (axios.isCancel(error) && matchCacheCondition(response.config)) {
  // console.log(`当前页面组件asyncData或者fetch函数中被缓存的接口url为：${error.message.url}`)
  return Promise.resolve(error.message.cacheData)
 }

 // 服务端打印api接口请求错误日志
 if (process.server) {
  try {
  const {
   config: {
   url
   },
   message
  } = error || {}
  console.log(`请求url：${url}，错误消息：${message}`)
  } catch(error) {
  // console.log(error)
  }
 }

 // 服务端，客户端统一reject错误对象，因此页面组件asyncData，fetch函数请求api接口一定要做catch处理
 return Promise.reject(error)
 })
}

serverCacheKey: props => props.item.id + '::' + props.item.last_updated

{
 async asyncData({ $axios }) {
 // 1、增加catch处理，是为了让服务端，客户端运行时不报错，特别是防止服务端运行时不报错，不然页面就挂了
 // 2、catch函数返回一个resolve空字面量对象的Promise，表明dataPromise1的状态未来始终是resolved状态
 const dataPromise1 = $axios.get('/apihttps://img.qb5200.com/download-x/data1').catch(() => Promise.resolve({}))

 const dataPromise2 = $axios.get('/apihttps://img.qb5200.com/download-x/data2').catch(() => Promise.resolve({}))
 const dataPromise3 = $axios.get('/apihttps://img.qb5200.com/download-x/data3').catch(() => Promise.resolve({}))
 const dataPromise4 = $axios.get('/apihttps://img.qb5200.com/download-x/data4').catch(() => Promise.resolve({}))
 const dataPromise5 = $axios.get('/apihttps://img.qb5200.com/download-x/data5').catch(() => Promise.resolve({}))
 const dataPromise6 = $axios.get('/apihttps://img.qb5200.com/download-x/data6').catch(() => Promise.resolve({}))
 const dataPromise7 = $axios.get('/apihttps://img.qb5200.com/download-x/data7').catch(() => Promise.resolve({}))
 const dataPromise8 = $axios.get('/apihttps://img.qb5200.com/download-x/data8').catch(() => Promise.resolve({}))

 // 保证apiData有数据
 const apiData = await new Promise(resolve => {
  Promise.all([
  dataPromise1, dataPromise2, dataPromise3, dataPromise4,
  dataPromise5, dataPromise6, dataPromise7, dataPromise8,
  ])
  .then(dataGather => {
   resolve({
   data1: dataGather[0],
   data2: dataGather[1],
   data3: dataGather[2],
   data4: dataGather[3],
   data5: dataGather[4],
   data6: dataGather[5],
   data7: dataGather[6],
   data8: dataGather[7],
   })
  })
 })

 return apiData
 }
}

$axios.interceptors.request.use(config => {
 // TODO
 // 检测由于请求java接口失败而导致的node应用程序错误
 config.url += '/xxxx'

 return config
})