Блог

Главная - Вопросы по программированию - Я борюсь с очень медленными запросами Axios в asyncData

Я борюсь с очень медленными запросами Axios в asyncData

#vue.js #axios #server-side #nuxt.js

#vue.js #axios #на стороне сервера #nuxt.js

Вопрос:

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.

Ответ №1:

Они работают одинаково. Это означает, что ваш api возвращает данные в течение 5 секунд, поэтому вам нужно посмотреть, что не так с вашим api.

Разница между asyncData и created заключается в том, что в asyncData nuxt будет ждать завершения запроса перед отображением страницы, а в created он не будет ждать, а просто отобразит страницу и обновит ее позже с результатом запроса

Ответ №2:

Убедитесь, что вы вызываете свой API на локальную конечную точку, когда вызываете его из asyncData перехвата. Это имеет ОГРОМНОЕ значение, если вы вызываете свой запрос на свой локальный сервер.

Вы можете настроить конечную точку для запроса вашего сервера и клиента, например:

 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 и заголовок авторизации, которые были неправильно обработаны на серверной части.

Следовательно, проблема может быть как в вашем интерфейсном коде, так и во внутреннем. Надеюсь, это помогло исследовать вашу собственную проблему.