Как в asyncData axios сделать вывод ошибок?

Question

[Максим]

Как в asyncData выводить код ошибки, который идет с сервера или сообщения + другие ошибки catch?

export default {
  async asyncData({ $axios }) {
      const query = await $axios
        .$get(`/api/v1/shop/1/banners`)
        .then((response) => {
          return response
        })
      return {
        banners: query.banners,
        currentPage: query.current_page,
        lastPage: query.last_page,
        perPage: query.per_page,
      }
  },
  data() {
    return {
  }

так что-то не работает

данные с сервера идут вот так

{"error":false,"current_page":1,"last_page":1,"per_page":16,"banners":[]}

Answer 1

[Александр Талалаев]

В nuxt.js лучше всего настроить общую централизованную обработку ошибок, через плагин и хелперы. Там есть "перехватчики" разных событий, в том числе onError, onRequestError, onResponseError, с помощью них легко и удобно сделать уведомления и/или редиректы для пользователя когда что-то пошло не так. Нужно помнить что asyncData предназначен для логики в контексте страницы, поэтому у него свои особенности работы и автоматическое установление локального состояния, удобно сокращает код и сразу данные доступны в шаблоне.
Возможно вам лучше подойдёт fetch, у него немного иная логика работы, ближе к условной привычной, к примеру в отличии от asyncData он не ждёт окончания его выполнение перед загрузкой(те возвращает промис, не ожидая его полного разрешения до финиша как asyncData ). В компоненте у вас будет доступен $fetchState, где можно отлавливать ошибку $fetchState.error. Но данные для шаблона нужно ставить самому, те определить нужные в data:

data() {
      return {
        banners: [],
        currentPage: null,
        lastPage: null,
        perPage: null,
      }
    },

И потом уже в fetch их устанавливать.
Короче говоря посмотрите документацию, там всё предельно кратко и ясно для начальных простых условий:
https://nuxtjs.org/docs/2.x/features/data-fetching