NUXT 缓存 API 请求答案

【问题标题】：NUXT caching API requestsNUXT 缓存 API 请求
【发布时间】：2021-01-15 22:33:41
【问题描述】：

我正在使用 Nuxt 开发一个项目，我需要在 15 秒内更新数据 15，该 api 是第三方 api，每天有 100 个 api 调用限制。在不计算在线用户数量的情况下，我需要能够每 15 秒仅进行 1 次 api 调用，所以如果我有 10k 在线用户，它只会发出 1 个请求。

到目前为止我已经尝试过。

我的店里有这个

async getData({ commit }) {
 await this.$axios
  .get('/api/breeds/image/random', {
  
  })
  .then(function (response) {
    commit('SET_DATA', response.data)
  })

我创建了一个中间件，我正在服务器端进行调用，因此开发工具上的“网络”选项卡上没有出现任何请求调用，但不幸的是，每次我刷新页面时它仍然算作 1 个请求，我需要一些排序缓存

export default async function ({ store, from }) {
  let isInitialPageLoad = !from

  if (isInitialPageLoad) {
    await store.dispatch('getData')
  }
}

最后我在 nuxt.config.js 上启用了 axios 上的代理

知道如何在不根据在线用户发出请求且不刷新页面的情况下进行缓存和更新吗？

【问题讨论】：

标签： api vue.js caching nuxt.js

【解决方案1】：

我强烈建议您使用服务工作者https://web.dev/service-worker-caching-and-http-caching/（本机浏览器功能）来处理这种缓存。

使用服务工作者，尤其是使用名为 workbox 的库，您可以保存客户端发出的任何调用，并以不同方式管理任何类型的调用（一些示例https://developers.google.com/web/tools/workbox/modules/workbox-strategies）

要在 nuxt 上使用它，您必须拥有 pwa 模块（workbox https://pwa.nuxtjs.org/workbox/ 部分）

【讨论】：

谢谢它现在工作了一半所以我能够将 api 调用存储在缓存中，但现在我需要在 15 秒内更新 api 15，有什么想法吗？我不知道，因为如果我在客户端更新它会为每个在线用户每 15 秒计算一次调用，所以我认为我需要在服务器端更新 api

【解决方案2】：

我遇到了类似的问题，Redis 来帮忙了。

我建议在服务器端和前端内部处理此类 API 调用，只需调用本地 API 来为用户提供服务。这是您使用 async-redis 的问题的解决方案。

// IMPORT
const asyncRedis = require('async-redis')

// INIT CLIENT
const redis_client = asyncRedis.createClient()
redis_client.on('error', (err) => {
  console.log('Error ' + err)
})

// API 
const GET_RANDOM_IMG_CACHE_TIME = 15
app.post('/get_random_image', async (req, res) => {
  const key = 'RANDOM_IMG' 
  let random_image_data = ''
  const value = await redis_client.get(key)
  if (value !== null) {
    // console.log(key, '   :found in cache');
    random_image_data = JSON.parse(value) 
  } else {
    const get_random_image_responce = await this.$axios.get('/api/breeds/image/random', {})
    random_image_data = get_random_image_responce.data
    await redis_client.setex(key, GET_RANDOM_IMG_CACHE_TIME , JSON.stringify(random_image_data))
  }
  res.status(200).send(random_image_data)
})

【讨论】：

【解决方案3】：

好的，你需要在服务器上缓存你的 api 请求只需安装和使用这个包nuxt-perfect-cache

npm i nuxt-perfect-cache

// nuxt.config.js

modules: [
    [
        'nuxt-perfect-cache',
        {
          disable: false,
          appendHost: true,
          ignoreConnectionErrors:false, //it's better to be true in production
          prefix: 'r-',
          url: 'redis://127.0.0.1:6379',
          getCacheData(route, context) {                    
              return false//this is for page cache you don't need it                  
          }
        }
      ]
]

这个模块会注入很酷的方法cacheFetch

所以对于缓存api请求

asyncData(ctx) {
    return ctx.$cacheFetch({ key: 'myApiKey', expire: 60 * 2 }, () => {
      console.log('my callback called*******')
      return ctx.$axios.$get('https://jsonplaceholder.typicode.com/todos/1')
    })
  }

别忘了在你的机器上安装redis

【讨论】：