Nuxt-我在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请求在increated和asyncData中使用时应该工作相同。

Answer 1

它们的工作原理相同。这意味着您的api返回了5秒钟的数据，因此您需要查看api出了什么问题。

asyncData与created的区别在于，在asyncData中，nuxt将在呈现页面之前等待请求完成，而在创建时它将不等待，只会呈现页面并稍后以请求结果对其进行更新

Answer 2

在asyncData挂钩中调用API时，请确保在本地终结点上调用API。当您将请求调用到本地服务器时，这会带来很大的不同。

您可以为服务器请求和客户端设置端点，例如：

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

Answer 3

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

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

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

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

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