vue.js - 我在 asyncData 中遇到非常慢的 Axios 请求

Question

nuxt: 2.4.5
@nuxtjs/axios: 5.4.1

我在 asyncData 中获取数据，它持续了 5 秒，这使得加载页面非常长，它与 axios 请求有关，当我这样做时，但是在方法 created 而不是 asyncData 中，一切都很完美。

我尝试重新安装所有依赖项并使用旧版本和最新版本，结果相同。

    asyncData({ app: {$axios} }) {
      // this is very slow
      return $axios.get('/api/v1/advertisements').then(() => {});
    },

    created() {
      // this works perfect
      this.$axios.get('/api/v1/advertisements').then(() => {});
    },

Axios 请求在 created 和 asyncData 中使用时应该是一样的。

Answer 1

他们的工作方式相同。这意味着你的 api 返回数据 5 秒，所以你需要看看你的 api 有什么问题。

asyncData 和 created 的区别在于，在 asyncData 中，nuxt 会在渲染页面之前等待请求完成，而在 created 中，它不会等待，只会渲染页面并稍后用请求结果更新它