Nuxt JS-在已安装的内部重用异步调用（axios get）？

Question

如果我使用Nuxt，Vue和Axios渲染页面，是否可以重用asyncData请求（或数据）？例如，如果我呈现了一个响应，并且用户在页面上执行了一个操作以对数据进行过滤，排序等，我是否可以重用相同的数据来再次呈现-还是需要在挂载中进行新的调用？

export default {
  asyncData ({ env, params, error }) {
    return axios.get(`${env.cockpit.apiUrl}/collections/get/cat_ruleset?token=${env.cockpit.apiToken}&simple=1&sort[ruleid]=1`)
      .then((res) => {
        return { catrules: res.data }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },
  mounted() {
  },
  methods: {
  }
}

Answer 1

当然，您可以重复使用它。最简单的方法是将结果存储在某个地方（实际上，在任何地方，但是您的商店都是个好地方），然后将方法更改为：

asyncData ({ env, params, error }) {
  return X ? Promise.resolve(X) : axios.get(...)
}

...其中X是上一次调用的存储结果。

但是您不必。

因为，默认情况下，浏览器会为您完成此操作。除非您专门为呼叫禁用缓存，否则，如果您在max-age的Cache-control中设置的秒数内对服务器进行相同的调用，浏览器将假定产生相同的结果。

[基本上，浏览器从缓存中返回前一个结果，而无需调用服务器，因此，除非您明确禁用它，否则浏览器本身已经在执行所需的优化。

您可以通过在Chrome中的DevTools的“网络”标签中轻松找到来自缓存的呼叫以及来自服务器的呼叫。来自缓存的那些将在(memory cache)列中具有Size：

...，并且在0ms列中的值为Time。

---

[如果您想控制何时调用服务器以及何时提供缓存的结果-大多数浏览器对max-age有限制（请参见上面的链接）-您可以（并且应该）存储上次调用的结果，而不是完全依靠浏览器缓存（基本上是方法内部的检查，这是我在顶部建议的）。这样，您就可以避免在超过缓存最大使用时间后再进行长时间呼叫，因为如果您已经选择了这样做，那么您已经拥有了数据。