web-dev-qa-db-fra.com

Erreurs de traitement Axios

J'essaie de mieux comprendre les promesses javascript avec Axios. Ce que je prétends, c'est gérer toutes les erreurs dans Request.js et appeler uniquement la fonction request de n'importe où sans devoir utiliser catch().

Dans cet exemple, la réponse à la demande sera 400 avec un message d'erreur en JSON.

C'est l'erreur que j'obtiens:

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

La seule solution que je trouve est d'ajouter .catch(() => {}) dans Somewhere.js mais j'essaie d'éviter de le faire. C'est possible?

Voici le code:

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)
    }
  )
}

Quelque part.js

export default class Somewhere extends React.Component {

  ...

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

  ...

}
javascriptpromiseaxios
11
mignz

En fait, ce n’est pas possible avec axios pour l’instant. Les codes d'état qui se situent dans la plage de 2xx Uniquement peuvent être capturés dans .then().

Une approche conventionnelle consiste à détecter les erreurs dans le bloc catch() comme ci-dessous:

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);
    }

  });

Une autre approche peut consister à intercepter des demandes ou des réponses avant qu’elles ne soient traitées ou à prendre.

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);
  });
16
Plabon Dutta