我在 asyncData 中处理非常慢的 Axios 请求答案

【问题标题】：I'm struggling with very slow Axios requests in asyncData我在 asyncData 中处理非常慢的 Axios 请求
【发布时间】：2019-08-21 07:23:59
【问题描述】：

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(() => {});
    },

在 created 和 asyncData 中使用时，Axios 请求的工作方式应该相同。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

当您从 asyncData 挂钩调用 API 时，请确保您将 API 调用到本地端点。如果您将请求调用到本地服务器，则会产生巨大的差异。

您可以为您的服务器请求设置一个端点，并为客户端设置一个端点，例如：

if(process.browser){
 $axios.defaults.baseURL = 'https://api.example.com'
}else{
 $axios.defaults.baseURL = 'https://127.0.0.1:8000'
}

【讨论】：

【解决方案3】：

我最近遇到了同样的问题：从服务器端发送的请求很慢，而在客户端则没问题。为了了解它们之间的区别，调查请求配置很有用。

在 axios 中，每个响应都包含请求配置。像这样记录它：

const res = await $axios.request({
    URL,
    method: 'GET',
});
console.log(res.config);

然后打开执行此请求的页面并收集服务器端和客户端的日志。在我的例子中，服务器发送了多余的 cookie 和 Authorization 标头，它们在后端以错误的方式处理。

因此，问题可能出在前端代码和后端代码中。希望它有助于调查您自己的问题。

【讨论】：