NUXT 缓存 API 请求

Question

我正在使用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 上的代理

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

Answer 1

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

使用 Service Worker，尤其是使用名为 workbox 的库，您可以保存客户端发出的任何调用，并以不同的方式管理任何类型的调用（一些示例 https://developers.google.com/web/tools/工作箱/模块/工作箱策略）

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

Answer 2

好的，您需要在服务器上缓存您的 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

Answer 3

我也遇到了类似的问题，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)
})

Answer 4

Nuxt 3.8 现在支持开箱即用的缓存！

检查：https://github.com/nuxt/nuxt/issues/15445 并且：https://www.youtube.com/watch?v=aQPR0xn-MMk