Широкий охват ошибок запроса аксиосов

Question

В моем SPA я использую axios для отправки запросов к API.В настоящее время я использую перехватчики запросов axios для добавления заголовков аутентификации к запросам, но я также хотел использовать их для перехвата ошибок 401 и удаления локально сохраненного токена аутентификации.

Я попытался добавить это к текущему перехватчику

   axios.interceptors.response.use((response) => {
        // Set user headers only if they are not blank.
        // If DTA gets a lot of request quickly, it won't return headers for some requests
        // so you need a way to keep headers in localStorage to getting set to undefined
        if (response.headers['access-token']) {
            localStorage.setItem('access-token', response.headers['access-token'])
            localStorage.setItem('client', response.headers.client)
            localStorage.setItem('uid', response.headers.uid)
            localStorage.setItem('token-type', response.headers['token-type'])
        }

        if (response.status === 401) {
            localStorage.setItem('access-token', '')
            localStorage.setItem('client', '')
            localStorage.setItem('uid', '')
            localStorage.setItem('token-type', '')
        }
        // You have to return the response here or you won't have access to it
        // later
        return response
    })

Но я обнаружил, что перехватчики, кажется, не работают, когда статус возвращает код ошибки.Можно ли как-нибудь отловить эти ошибки в приложении, не добавляя обработку ошибок в каждый запрос вручную?

Answer 1

Добавить вторую функцию к перехватчику errorresponseHandler:

function errorResponseHandler(error) {

}

// apply interceptor on response
axios.interceptors.response.use(
    response => response,
    errorResponseHandler
);

Answer 2

Вы можете определить и экспортировать функцию-обработчик ошибок, которая принимает параметр error в одном из ваших классов помощников, утилит и т. Д., Затем вы можете вызывать этот метод с одной строкой внутри каждого блока перехвата.

Или,

Вы определяете метод doRequest(), который полностью обрабатывает отправку и обработку ответа процесса, и передаете этот метод вашими пользовательскими параметрами, связанными с запросом, такими как объект JSON { url: 'A', method: X, data : Y}, вызывайте еговспомогательный метод отовсюду.

Answer 3

Чтобы обработать ошибки в ответе, вам нужно использовать второй параметр обратного вызова в перехватчике ответа.

axios.interceptors.response.use((response) => {
  // Set user headers only if they are not blank.
  // If DTA gets a lot of request quickly, it won't return headers for some requests
  // so you need a way to keep headers in localStorage to getting set to undefined
  if (response.headers['access-token']) {
    localStorage.setItem('access-token', response.headers['access-token']);
    localStorage.setItem('client', response.headers.client);
    localStorage.setItem('uid', response.headers.uid);
    localStorage.setItem('token-type', response.headers['token-type']);
  }

  // You have to return the response here or you won't have access to it
  // later
  return response;
}, (error) => {
  // do what you want to do when error happens
  if (error.response.status === 401) {
    localStorage.setItem('access-token', '');
    localStorage.setItem('client', '');
    localStorage.setItem('uid', '');
    localStorage.setItem('token-type', '');
  }

  else if(error.response.status === 500) {
    // do something for all 500 errors
  } else {
    // do something for all other error codes
  }

  // should reject the promise so your api call goes to catch block
  return Promise.reject(error);
});

Для получения дополнительной информации Официальные документы Axios *

У меня есть библиотека перехватчиков axios, опубликованная в npm.Вы можете обратиться к исходному коду для более подробной информации об обработке ошибок в перехватчиках.

axios-retry-intercceptor