Axios обрабатывает ошибки

Я пытаюсь понять, что javascript обещает лучше с Axios. Я делаю вид, что обрабатываю все ошибки в Request.js и вызываю функцию запроса только в любом месте без использования catch().

В этом примере ответ на запрос будет 400 с сообщением об ошибке в JSON.

Это ошибка, которую я получаю:

Uncaught (in promise) Error: Request failed with status code 400

Единственное решение, которое я нахожу, это добавить .catch(() => {}) в Somewhere.js, но я стараюсь не делать этого. Является ли это возможным?

Здесь код:

Request.js

export function request(method, uri, body, headers) {
  let config = {
    method: method.toLowerCase(),
    url: uri,
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer ' + getToken() },
    validateStatus: function (status) {
      return status >= 200 && status < 400
    }
  }

  ...

  return axios(config).then(
    function (response) {
      return response.data
    }
  ).catch(
    function (error) {
      console.log('Show error notification!')
      return Promise.reject(error)
    }
  )
}

Somewhere.js

export default class Somewhere extends React.Component {

  ...

  callSomeRequest() {
    request('DELETE', '/some/request').then(
      () => {
        console.log('Request successful!')
      }
    )
  }

  ...

}

Ответы

Ответ 1

На самом деле это невозможно с аксиомами на данный момент. Коды состояния, которые попадают только в диапазоне 2xx, могут быть зафиксированы в .then().

Обычный подход заключается в том, чтобы ловить ошибки в блоке catch() как показано ниже:

axios.get('/api/xyz/abcd')
  .catch(function (error) {
    if (error.response) {
      // Request made and server responded
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }

  });

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

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

Ответ 2

если вы хотите использовать асинхронное ожидание, попробуйте

export const post = async ( link,data ) => {
const option = {
    method: 'post',
    url: '${URL}${link}',
    validateStatus: function (status) {
        return status >= 200 && status < 300; // default
      },
    data
};

try {
    const response = await axios(option);
} catch (error) {
    const { response } = error;
    const { request, ...errorObject } = response; // take everything but 'request'
    console.log(response);

}
 };