web-dev-qa-db-ja.com

Axios処理エラー

AxiosでJavaScriptの約束をより良く理解しようとしています。私は、Request.jsのすべてのエラーを処理し、catch()を使用せずに、どこからでもリクエスト関数を呼び出すだけです。

この例では、要求に対する応答は400で、JSONのエラーメッセージが含まれます。

これは私が得ているエラーです：

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

私が見つける唯一の解決策は、Somewhere.jsに.catch(() => {})を追加することですが、そうすることを避けようとしています。出来ますか？

コードは次のとおりです。

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

  ...

}
javascriptpromiseaxios
11
mignz

実際、現時点ではaxiosでは不可能です。 _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);
    }

  });
_

別のアプローチは、thenまたはcatchによって処理される前に要求または応答をインターセプトすることです。

_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