私はまったく同じ環境を持っています。 これを試して：

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error.response)
});

catch console.log(error)からconsole.log(error.response)します。

グローバルインターセプターを使用して、 error.responseのみを拒否することもできます。 問題は、 console.logがエラーを出力しようとすると、オブジェクト構造ではなく文字列表現が出力されるため、 .responseプロパティが表示されないことです。

responseプロパティのみを拒否する方法を誰かが疑問に思っている場合は、次のようにします。

axios.interceptors.response.use((response) => {
    return response;
}, function (error) {
    // Do something with response error
    if (error.response.status === 401) {
        console.log('unauthorized, logging out ...');
        auth.logout();
        router.replace('/auth/login');
    }
    return Promise.reject(error.response);
});

重要な部分はreturn Promise.reject(error.response);

これにより、上記のソリューションがインデントまたは縮小中にJSファイルの構文を台無しにした場合でも、同じ結果が得られます:)

.post('ajax/register/otp', this.registerData)
.then(function (response) {
       return otpSent(response)
})
.catch(function (error) {
      console.log(error.response);
 });

@ gopal-gそれは私には定義されていません。

その場合、@ pedro-massはサーバー側からの応答がない可能性があります。 私のシナリオでは、エラーが発生したときの応答はJSONでしたが、 error.responseを使用して応答を取得できました

@ gopal-g開発ツールの[ネットワーク]タブを見ていると、応答を確認できます。 それが違いを生むなら、それは401です。

@ pedro-massでも同じエラーが発生します。

これが私のコードです

async function test () {
try {
  let res = await axios.get('/xxxxx/xxxx')

} catch (e) {
  console.log(e.response) // undefined
}
}

私にとって、「error.response」の使用は機能しません。 この問題は、データベースサーバーを切断し、Webサーバーがエラー500を返したときに発生します。

開発ツールの[ネットワーク]タブ

応答コード：500
応答本体：

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

クロームコンソールエラー：

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

バージョン

"axios"： "^ 0.15.3"

catch問題があります。リクエストが行われる前にエラーが発生した場合、 catchはerr.responseプロパティがありません。 。応答がありません。 したがって、 catchはエラーをキャッチします。 @fabiorecifeのような状況で、ネットワーク障害のために応答がない場合errをHTTPエラーとして扱わないでください。これは、常に当てはまるとは限りません。

@alsofronieでは、たとえば413のような飛行前の失敗を処理する（互いに区別する）ための好ましい方法は何ですか？

同様の問題が発生しています-Chromedevtoolsは401を表示し、応答は{"message":"Identity token has expired"} 、私はcatch( (error) => {...}) -しかしerror.responseは空白です。 これは、 GET関連付けられた先行するOPTIONS呼び出しのステータスが200あるためかどうか疑問に思います。 この場合はどうすればよいですか。また、 401ステータスコードを取得する適切な場所はどこですか。

@robbiemuすでに文書化されていると思います： https ：

@mrchiefこれに感謝します、もう一度やり直してください。 私の場合、このソリューションはほとんどの場合に機能しますが、現在発生している問題は、 error.responseオブジェクトが存在することですが、フィールドはundefinedであり、 response内の値の呼び出しです。

@paolavnessここにコメントする代わりに、新しい問題を開くことをお勧めします。 ウォッチクローズの問題は多くありません。 または、StackOverflowで質問することもできます。

@mrchiefああ、これは閉鎖されています、それを指摘してくれてありがとう。 しましょう。

私も同じ問題を抱えていました。 最終的に、エラーコードを401から403に変更し、すべてが期待どおりに機能しました。 空のエラーオブジェクトの理由を推測し、結果として生じるjavascriptエラーは、401エラーのドキュメントで見つけたこのステートメントと関係があります。

「[401エラー]応答には、要求されたリソースに適用可能なチャレンジを含むWWW-Authenticateヘッダーフィールドを含める必要があります。」

したがって、401エラーを利用する場合は、www-authenticateヘッダーフィールドを含める必要があります。 これを実行したくない場合は、403エラーを使用してください。

おはようございます。この問題が発生しましたが、サーバーでcorsを有効にするようにApache構成を変更して修正しました。 以下のリンクをご覧ください

https://enable-cors.org/server_apache.html

console.log(JSON.stringify(error))のみすべての応答をデバッグできます

axios.post（url）
.then（（response）=> {
// なにか
}）
.catch（（response）=> {
if（response.status == undefined）{
alert（ 'unauthorized'）
}
}）

@fabiorecifeで説明されているのとまったく同じ問題が発生し

.catch(error=>{
let errorObject=JSON.parse(JSON.stringify(error));
console.log(errorObject);
dispatch(authError(errorObject.response.data.error));
})

これにより、 errorObject変数で期待される結果が生成されます。

@petruscurtu私も同じ問題を抱えています！それは私には

なぜ「Access-control-allow-originなし」をスローするのかわかりませんが、サーバーが設定しています。 応答ヘッダーは問題ありません

解決しました。 auth apiは、Access-control-allow-originが必要な正しいヘッダーを応答していませんでした

@luxueyanサーバーでCORSを処理する方法がわからないため、問題が何であるかわかりません。 axiosに関する限り、コンソール出力にconfigオブジェクトとrequestオブジェクトが表示されます。 その出力を確認する必要があると思います。 サーバーが送り返す応答の形式に関連している可能性があります。

@luxueyan Access-control-allow-originがhttp://localhost:8081設定されているようです（これがこのアドレスhttp://10.31.143.32:8080のサーバーに設定されていると仮定しますか？）URLを確認できますかこのプロジェクトを実行しているのは？ http://localhost:8081ですか？ そうでない場合は、ポート番号が異なっていても、CORSドメインルールに違反しています。

@petruscurtu出力は、応答のインターセプターで「JSON.parse（JSON.stringify（error））」です。 応答プロパティはありません

@chiefie他のajaxapiは正しいコンテンツに応答できるため、「Access-control-allow-origin」設定は問題ないと確信しています！キャプチャコードapiのみが失敗します。有効期限が切れると、478ステータスの応答エラーになり、axiosは応答できません。レスポンスボディをゲット！

アップデート！ これはサーバーAPIエラーであり、ヘッダーにcors設定がありませんでした。 今はうまくいきます。

@ juliano-barrosに感謝します、それはクロスオリジンのせいでした。 これで、すべてのajaxリクエストが正常に機能します。

この生のエラーは、サーバーに到達できない/ CORSが無効になるたびにスローされます。
error.responseはundefinedます。

メッセージ、ステータス、および応答データを含むIntegrationErrorを作成しましたが、常に同じ構造に従います。 このようにして、axios / rawエラーを処理から切り離すことができます。

Axiosの皆さん、これはHTTPエラーであると思います... error.responseを含みます。
これは上記のように確認できます

昨日はこの号の1周年でした。 「修正」されるのでしょうか、それともこの時点で「問題なし」と見なされるのでしょうか。

@frostshoxxだから、これは「問題ではない」と思います。 私は他の人と同じ問題を経験していますが、何が起こっているのかを理解しました。これはバグや問題ではなく、世界の仕組みにすぎないことがわかります。

混乱しているすべての人のために（そしてこの問題が1歳になったことを祝って）、何が起こっているのか、そしてサーバーの応答を得る方法を説明しましょう。

どのようにしてここにたどり着きましたか？

.catch()荒れ地に遭遇する理由はたくさんあります。 リクエストの早い段階でAxiosでエラーが発生することがあります。 これは、CORSリクエストで発生することがあります。 Axios OPTIONSが使用できない場合、Axiosはパニックになり、サーバーから実際に応答を受け取る前に.catch()に送信するため、これらの場合、応答は使用できません。

「いいえ、DevToolsに表示されているので、応答が返ってきました」と言う人もいるかもしれません。 サーバーが応答する前に、AxiosがHTTPリクエストを開始し、エラーが発生し、それ自体を中止して.catch()に送信することがあるため、これは常に当てはまるとは限りません。 Axiosが.catch()関数を実行してから数ミリ秒後、サーバーが応答を返す可能性があります。これは、まだ応答をリッスンしているため、DevToolsに表示されます。 ただし、Axiosはこの時点で長い間使用されているため、Axiosが.catch()関数を開始した時点では存在していなかったため、 responseは使用できませんでした。

サーバーから4XXまたは5XXエラーに関するメッセージを受け取った方は、幸運です。 このエラーを取得するために、Axiosは完全なサーバー応答を待機する必要があったため、通常はサーバーからの応答があります。 このような場合、Axiosはresponseを使用して.catch()送信しますが、応答をその場で作成する独自のerrorオブジェクトにラップします。
したがって、 5XXまたは4XXエラーが発生した場合は、サーバーの応答を利用できる可能性がありますが、それはDEEPに埋もれています。

error.response.data.data.message試しください。 これは、サーバーエラーを返すLaravelAPIリクエストで機能することが確認されています。

Laravel以外のユーザー-サーバーからコアレスポンスを取得するには、少なくともerror.response.dataに移動する必要がありますが、ほとんどのサーバーは、応答を別のdata{}オブジェクトにラップして、さらに深くレイヤーし、最後にそこから.messageような必要な応答プロパティにアクセスします。

しかし、Console.Logを実行しましたが、応答がありません。

ええ、私は知っていますが、とにかく私をユーモアするためにerror.response.dataを出力してみてください。

何らかの理由で、Axiosはエラーオブジェクトのconsole.log(error)の出力を変更します。 なぜ彼らがこれを行うのかはわかりませんが、代わりにconsole.log(JSON.stringify(error))書くと、オブジェクト全体がすべての栄光で表示されます。

これはシリアル化されたJSONであり、約2層の深さで読みにくくなります。 したがって、完全なものをコピーしてJSON prettifyerに貼り付け、エラーオブジェクトの構造を調べる必要があります。

Axiosで500エラーまたは400タイプエラー（または実際にはサーバーが提供するエラーコード）が発生した場合、それはリクエストが完了し、サーバーの応答が利用可能であることを意味します。

問題は、それが非常に深いことです。Axiosは、ほとんどの人がerror{}オブジェクトを表示するために行うconsole.log(error)の出力を変更するため、ほとんどの人はそれが存在することを知りません。 しかし、それはそこにあります！

@ VSG24男!! それは命を救う答えです：D

fwiw、循環参照による0.18.0のJSON.stringify(error)爆弾。

エラー時にサーバーの応答を返すインターセプターを設定しました

axios.interceptors.response.use(
  response => {
    // do someting on response
    return response
  },
  error => {
    // do someting on errir
    return Promise.reject(error.response.data) // => gives me the server resonse
  }
)

    try {
      const { data } = await htttp.post(login, payload)
      // do someting with data
    } catch (e) {
      console.log(e) // server response data
    }

@alimiraymanすべてのリクエストを監視する必要がなければ、問題なく動作するようです。 ただし、すべてのリクエストを追跡する必要がある場合、コード内のすべての場所でエラーハンドラーを繰り返すのは合理的ではありません。 私が間違っていることを理解していない限り（そうかもしれませんが）、axiosは、サーバーがエラーをスローする前に、サーバーがエラーを返したことを確認する必要はありませんか？

@ hhowe29はcircular-json使用します

このスレッドは他の多くのスレッドと同じように見つかり、vue.jsおよびvuexモジュールでaxiosを使用しています。

私のvuexモジュールアクションはaxiosエラーをキャッチし、commit（ERROR_HAPPENED、error）を実行して、vuexモジュールのERROR_HAPPENEDミューテーションを実行します。 しかし、応答をvuex状態に設定しようとすると、応答プロパティなしでエラーが発生し、error.responseが未定義になります。

アクションでconsole.log（error.response）を実行すると、commit（）の前に応答を確認できます。 ですから、おそらくvuexによって破壊されています。

commit（ERROR_HAPPENED、error.response.data）を実行するか、アクションで401であるかどうかを確認し、ステータスコードに応じて他のコミットを実行します。 このマングリングは401コードでのみ発生するためです。 404や500のような他のエラーは、私のミューテーションに渡されます。

壊れていない。 Vuexは、バグによってさえも、これを混乱させません。
いくつかの種類のエラーは、主にAxiosインターセプター内で発生し、これが公開されない原因になります。

いくつかの更新？

@AllanPinheiroDeLima返信が遅れて申し訳ありませんが、誰かのコードのすべての場所にインターセプターを書いている人はいないと思います。 コードベースでインターセプターを1回記述し、それをヘルパークラスとして使用します。これは1番です。2番の最初のクエリは、_server error response_を取得せず、代わりにtry catch _javascripterror_を取得しましたaxiosエラーインターセプターは、基本的に、コーディング方法を変更したり、大規模なコードベースを変更したりしたくない場合に、その問題を解決するミドルウェアとして機能します。

ええ、私は同意します。 生のキークロークを使用する代わりに、自分のサーバーに統合することで、この問題の解決策を見つけました。 このようにして、サーバーのエラーをインターセプトし、読みやすいエラーをフロントエンドに送信できます。 今のところ、この種の問題を解決する唯一の方法だと思います:)

私はまだ同じ問題を抱えています。 Axiosインターセプターconsole.log('interceptors', JSON.stringify(error))使用すると、このログinterceptors {"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"method":"post","url":"http://localhost:5000/api/autenticacao/login","data":"{\"siglaInstituicao\":\"NEAS\",\"usuario\":\"emersoncpaz\",\"senha\":\"belle1903\"}"},"request":{}}が取得されますが、chrome devtools応答APIから正しい応答があります： A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server) axiosからこの応答を取得するに

5xxエラーがcatchブロックによって処理されない（応答オブジェクトを返さない）理由は何ですか？ ステータスコード502はDevToolコンソールに表示されますが、Axiosによって処理されません。

これは私のために働きました（laravelの中止ヘルパー：abort（500、 'メッセージ'））
`` `
.catch（error => {
console.log（error.response.data.message）;
}）;

`` `

これがうまくいったと言っているコードの断片以外の完全に機能する例を持っている人はいますか？ 1行のスニップは、このスレッドで誰を参照しているかわからない場合はあまり役に立ちません。コードのスニップをどこに配置したか、最終的に機能するコードはどのようになりますか？

私はインセプターでエラーをキャッチしようとしています。エラーコードに基づいて、401がログインする場合はリダイレクトでリクエストを終了するか、422がリクエストを呼び出し元のコンポーネントに戻してフォームエラーを更新できるようにします。

何か案は？

Nuxt axiosを使用していますが、onResponseErrorインターセプターは次のようになります。

$axios.onResponseError(error => {
    const code = parseInt(error.response && error.response.status)
    console.log(code, 'Axios onResponseError')
    console.log(error.response.status, 'status')
    console.log(error.config, 'config')
    console.log(error.response, 'response')
    // Do something with response error
    if (error.response.status === 401) {
      console.log('unauthorized, logging out ...')
      app.$auth.logout()
      redirect('/login')
    }
    if (code === 400) {
      // redirect('/400')
      console.log(`400 onResponseError`)
    }
    if (code === 408) {
      console.log(`A timeout happened on url onResponseError`)
    }
    if (code === 418) {
      console.log(`A teapot onResponseError`)
    }
    if (code === 428) {
      console.log(`428 onResponseError`)
      // redirect('/login')
    }
    return Promise.reject(error)
  })

また、サンプル呼び出しは次のようになります。

async postRecord (clear = false) {
      try {
        const { r } = await this.$axios.$post(this.endPoint, this.formData)
        console.log(r, 'response')
        // do something with response
      } catch (e) {
        console.log(e, 'error in crud') // server response data
        // i should never get here if error since the interceptor should kill the request if 401
       // for testing this request is returning a 401
      } finally {
        this.submitted = false
      }
    },

ありがとう、
デイブ

インターネットがない場合、error.responseは未定義です-これが最善の方法ですか？

プレーンテキストでエラーが発生します。オブジェクトのエラーを変換するには、次を使用する必要がありました。

var errorObj = JSON.parse(JSON.stringify(error));

これはaxiosではなくサーバーにあります。
error.response.status、未定義の場合はインターネットであることがわかります
JSの接続の問題または構文エラー

2019年1月2日水曜日、15：40 Ibrahim Azhar Armar < [email protected]
書きました：

プレーンテキストでエラーが発生します。エラーを変換するには、次を使用する必要がありました。
オブジェクト。

var errorObj = JSON.parse（JSON.stringify（error））;

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/axios/axios/issues/960#issuecomment-450896476 、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AEETt2r3bt2QCixDlzh4fZvWp_1rPkxuks5u_NMEgaJpZM4N9Ljl
。

@kgrosvenorサーバースクリプトをスリープ状態にして、

正しいエラーメッセージが表示されますが、コンソールにはプレーンテキストで表示されるため、サーバーに関連していないように見えるフォーマットの問題のみが表示されます。

もしそうなら、私はサーバーでこれを引き起こしている可能性があるものを理解しようとしていますか？

タイムアウトになっている可能性が高いので、エラーに「応答」が存在するかどうかを確認してみてください

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

Javaプログラマーから500エラーのエラーメッセージが届きましたが、そのメッセージを処理できません。 だから私は彼に応答としてエラーメッセージで200ステータスを返すように頼んでいますが、彼は私に腹を立てており、彼のHTTPクライアントは500ステータスのすべてのメッセージを見ていると言います。 500ステータスのエラーメッセージが見つからないので、彼は私が愚かだと思っています。 axiosが500エラーメッセージを処理しないことを彼に説明するにはどうすればよいですか？

Javaプログラマーから500エラーのエラーメッセージが届きましたが、そのメッセージを処理できません。 だから私は彼に応答としてエラーメッセージで200ステータスを返すように頼んでいますが、彼は私に腹を立てており、彼のHTTPクライアントは500ステータスのすべてのメッセージを見ていると言います。 500ステータスのエラーメッセージが見つからないので、彼は私が愚かだと思っています。 axiosが500エラーメッセージを処理しないことを彼に説明するにはどうすればよいですか？

実際には、ステータス500のエラーを処理できる必要があります。それに応じて、httpステータスを確認し、クライアント側でどのように処理するかを決定できます。 これはすでにこのリンク（https://github.com/axios/axios#handling-errors）に記載されています

これが私がサーバーからエラー500をキャッチする方法です、そしてそれは私のために働きます。

.catch(function (error) {
    var errorObj = JSON.parse(JSON.stringify(error));
    console.log(errorObj);
    if (errorObj.code == 'ECONNABORTED') {
        alert('Connection timed out.');
    }
});

500ステータスは関係なく処理できますが、私の意見では、サーバー側から意図的に返すのはかなり悪い習慣です...

また、error.responseが未定義になっているので、以下のコードを試してみます。

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  // Do something with response error
  let {response} = error;
  // response?.status === 401 es7 way.
  if (response && response.status === 401) {
    // Do logout;
    // Redirect to login;
    return Promise.reject(error.response);
  } 
  else if (error.response){
    // Do something.
    console.log('some API_CLIENT error');
    return Promise.reject(error.response);
  }
 return Promise.reject(error);
});

これは残念です。エラー処理は重要です。

今はどうですか？ バージョン0.18.0でも同じ問題が発生します。

私にとって同じ問題： @nuxtjs/axios v5.0.0

バグです

ダニエルスターン[email protected]年2月28日周四04:39写道：

この議論を要約しましょう。

tl; dr：
誰もがHTTPエラーをキャッチできないのは問題です。
開発者HTTPエラーをキャッチできないことは問題ではあり

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/axios/axios/issues/960#issuecomment-468020991 、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AAN8CbMHohyuSZHYlcieD_5yUqizpkSYks5vRuzygaJpZM4N9Ljl
。

この問題については、READMEで言及する必要があります。非常に役立ちます。 ありがとう！

https://github.com/axios/axios/issues/960#issuecomment -320659373

他のポスターに同意する。 エラーが発生するポイントに応じて、予測できない構造のオブジェクトをcatchするのは、あまり良いことではありません。 error.responseとJSON.stringify(error)はどちらも、原因によってはエラーになる可能性があります。 https://github.com/axios/axios#handling -errorsで提案されているアプローチも、これについて正確に啓蒙されているわけではありません。

恐ろしいエラーメッセージを返すためにこのすべてのアクロバットをしなければならないことは、2019年には恥ずかしいことです。1990年には恥ずかしかったでしょう。真剣にJSの人々、あなたのゲームをステップアップしてください。 いくつかのAPI設計を学び、あなたの「創造的な決定」があなたが故意に無視している混乱をデバッグするのに数千人の人々に数え切れないほどの時間を要したことを認識してください。

循環参照に苦労している人のために、あなたはこのようなことをすることができます：

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

循環参照に苦労している人のために、あなたはこのようなことをすることができます：

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

みんなありがとう！ コードは私にとってはうまく機能しました。

問題は「lib / core / enhanceError」にあります。 リクエストオブジェクトがエラーに追加されます。 promiseベースのAPIにはパラメーターが1つしかないため、回答に応答を追加することは理にかなっています（要求ライブラリは、最初のパラメーターとしてエラーを返し、2番目のパラメーターとして応答を返します）。 ただし、すべてのリクエストを追加しても意味がありません。 コードの変更は非常に簡単ですhttps://github.com/geoblink/axios/pull/1/files
それが重要であると思われる場合、私はメインブランチにPRを開くことができます（問題が閉じられているので私はそれをしていません）

リクエストを行うたびに呼び出す関数ラッパーを作成できます

const api = async (uri, data) => {
  try {
    const { data: response } = await axios({
      url: domain + uri,
      method: 'POST',
      data,
    });

    return response.data;
  } catch (error) {
    throw error.response.data;
  }
};

タイムアウトになっている可能性が高いので、エラーに「応答」が存在するかどうかを確認してみてください

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

これは私のために働いています。 ありがとう

私にとって、「error.response」の使用は機能しません。 この問題は、データベースサーバーを切断し、Webサーバーがエラー500を返したときに発生します。

開発ツールの[ネットワーク]タブ

応答コード：500
応答本体：

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

クロームコンソールエラー：

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

バージョン

"axios"： "^ 0.15.3"

こっちも一緒...

私の経験では：

「catchでconsole.log（error）からconsole.log（error.response）に変更してください。」

catchのconsole.log（error.response.data）でうまく機能しました。

axios.interceptors.response.use（null、error => {
error.responseを返します。
}）;

getClients：async（state）=> {
const res = await axios.get（ ${BASE_API}/clients ）;
console.log（ 'res'、res）;
if（res）{
state.commit（ "setClient"、res.data）;
}
}

別のオプション

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="6">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

試す{
これを待ってください。$ axios....。
} catch（e）
{{
console.log（e）

}

axios.get("https://......") 
     .then( response => {
          return response
}).catch( () => {
         store.dispatch("errorComponentMethod")   // if there's an error, method is dispatched
})
//////////////////////////////////////
actions : {
      errorComponentMethod(){
              router.push("/errorComponent")     // method routes to error component
      }
}

まことにありがとうございます ！ とても助かりました！

まだこの問題が発生しています。 Chromeデバッガーでは、応答は正しいですが、axiosは代わりに一般的な"Request failed with status code 403"返します

私はまだこれを持っていて、私は本当に混乱しています。 上記のコメントをキャッチしようとしましたが、エラーが発生したときにaxiosがundefinedを返すのはなぜですか？
try{ const res = await axios.get("someurl"); return res; } catch(e) { console.log(e); }
サーバーが、なぜ機能しなかったのかというメッセージを含む応答を送り返しているにもかかわらず、resは未定義です。 そして、私はそのデータに到達できません...なぜ??

**編集：私のバグを見つけました-axiosで私にとって何も悪いことはありません。 私のコメントを2つ下のコメントで見てください。 つまり、インターセプターはエラーデータをaxiosパイプラインに戻さなかったため、常に未定義になりました。

@HoogsterIncここでTypeScriptの定義を見て
あなたはこのようなことをすることができます

try {
   axios.get(...)
} catch (error) {
   if (error.reponse) {
      // http status 4x, 5xx
   } else {
      // network error like timeout, connection refused etc...
   }
}

@konstantinblaesiを助けようとして応答してくれて

私の場合、ユーザーの認証をチェックするためにインターセプターを設定しました。ユーザーが認証されなくなった場合は、特定のエラーコードを送信します。 ただし、エラーが認証されていないコードと一致しなかった場合、エラーデータを渡さなかった...ため息...ばかげた悪い間違い。 したがって、認証されていないエラーコードを確認した後、Promise.reject（error）;を返すようにしました。 -これで問題は解決し、エラーデータがいっぱいになりました。

err.toJSON()使用できます

catch((err) => {
    console.log(err.toJSON()); // Return error object
});

https://github.com/axios/axios#handling -errors

（グローバルに設定）

main.jsで

import axios from 'axios'

var instance = axios.create(
 { validateStatus: function (status) {
    return status < 600; #you can change this with another value
  }
 });

また
（特に設定）

  axios.post('/formulas/create', {
       name: "",
       parts: ""
  }, { validateStatus: function (status) {
          return status < 600; // Reject only if the status code is greater than or equal to 500
        }})
    .then( 
   (response) => { console.log(response) },
   (error) => { console.log(error) }
   );

Axios＆catch500エラー応答データ

const log = console.log;

  updateData(options = {}, flag = false){
    let url = `/opapi/appDownloadGuide/update`;
    let message = '更新成功!';
    let errorMessage = '更新失败!';
    if (flag) {
      message = '添加成功!';
      errorMessage = '添加失败!';
      url = `/opapi/appDownloadGuide/add`;
    }
    axios
    .post(url, options)
    .then(res => {
      // ❓🤔️500 , 在这里拦不住呀？
      log(`res`, res, res.status);
      return res.data;
    })
    .then(json => {
      const {
        code,
        success,
        data,
        errorCode,
        errorHint,
      } = json;
      if(code === 200) {
        this.$message({
          type: 'success',
          message,
        });
        this.init();
      } else{
        this.$message({
          type: 'error',
          message: `${errorMessage}: ${errorHint ? errorHint : ""}`,
        });
      }
    })
    .catch(err => {
      // 👌在这里拦截 error data!
      log(`error.response`, err.response);
      const {
        data,
        status,
        statusText,
      } = err.response;
      this.$message({
        type: "error",
        message: `${statusText}-${status}: ${data || ""}`,
        // message: "不能重复创建",
      });
      console.error(`500 err`, err);
    });
  },

https://stackoverflow.com/questions/38798451/how-to-catch-and-handle-error-response-422-with-redux-axios

私はまったく同じ環境を持っています。 これを試して：

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error.response)
});

_ catch _でconsole.log(error)からconsole.log(error.response)します。

グローバルインターセプターを使用して、 error.responseのみを拒否することもできます。 問題は、 console.logがエラーを出力しようとすると、オブジェクト構造ではなく文字列表現が出力されるため、 .responseプロパティが表示されないことです。

私のために働いていない

@ gopal-gそれは私には定義されていません。

@ gopal-gはい同じ未定義のimを取得しています。

Axios0.19.2を使用しています。 @konstantinblaesiのソリューションを追加しました：

別のオプション

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="9">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

これは私のために働いた、どうもありがとう@konstantinblaesi ！ Axiosのデフォルトの動作がこのようになっていない理由がわかりません。標準の動作は、元のエラーの「メッセージ」部分を削除することです。これが最も重要な部分だと思います。

明確にするために、私のアプリでは、サーバーが400エラーを返しています（これは応答である必要があります）。

% curl -X POST http://my-server/api -d '{"foo": "bar"}'
{"status": 400, "message": "missing param XYZ"}

この修正がないと、Axiosから、 name 、 stack 、 config （元の要求がある）のみを含み、「応答」を含まないエラーオブジェクトを取得します。 ただし、この修正により、エラーにはサーバーからの正しいmessageプロパティが含まれます。

この修正なしに「応答」プロパティがない理由については、1171行目あたりのaxios.jsのsettleに関連しているようです。

        module.exports = function settle(resolve, reject, response) {
          var validateStatus = response.config.validateStatus;
          if (!validateStatus || validateStatus(response.status)) {
            resolve(response);
          } else {
            reject(createError(
              'Request failed with status code ' + response.status,
              response.config,
              null,
              response.request,
              response
            ));
          }
        };

エラーの作成時にresponse.message通過しないことがわかります。 さらに、私のアプリでは、 error.responseに応答が表示されません。そのようなプロパティはありません。理解できませんが、 しかし、とにかく上記の修正は私のために働きます。

サーバーから検証エラーをキャッチしようとしています。

コード：

axios.post('/formulas/create', {
       name: "",
       parts: ""
})
.then( 
  (response) => { console.log(response) },
  (error) => { console.log(error) }
);

コンソールログ出力

Error: Request failed with status code 422
    at createError (app.js:6765)
    at settle (app.js:29489)
    at XMLHttpRequest.handleLoad (app.js:6600)

ネットワークタブの出力
{"name"：["名前フィールドは必須です。"]、 "parts"：["パーツフィールドは必須です。"]}

ネットワークタブの応答であるJSONフォーム検証を含むオブジェクトが表示されるはずですが、JSキャッチ出力を取得しているようです。

また、次のことを試しました。

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error)
});

同じ結果

ここで私と同じ環境を使用して、より多くの人々が同じ問題を抱えているようです。
https://laracasts.com/discuss/channels/vue/issues-with-axios-catch-method

• Axiosバージョン：^ 0.16.2
• VueJS 2.3.4
• Vue-template-compiler 2.3.4
• Laravel-ミックス
• 環境：ノードv6.4.0、chrome 58、Mac OSX 10.12.4

axios.post（ '/ Formulas / create'、{
名前： ""、
パーツ： ""
}）
。それから（
（応答）=> {console.log（応答）}、
）.catch（err => consol.log（err.response.data）}）;

error.responseはオブジェクトであり、コンソールログに[object、object]を出力します。
エラーメッセージにアクセスするには、error.reposne.dataを使用する必要があります。
参照： https ：

@chandukasmはい、しかし私の場合、私はerror.response持っていません-要求が送信され、応答がエクスプレスで受信されたとしても、それは未定義です。 上記の私のコメントも参照してください。 応答が存在する場合でも、メッセージは無視されます（一般的なメッセージに置き換えられます）。

error.responseはオブジェクトであり、コンソールログに[object、object]を出力します。
エラーメッセージにアクセスするには、error.reposne.dataを使用する必要があります。
参照： https ：

console.logに[object、object]が表示されている場合は、JSON.stringify（error.response）を実行して実際のエラーを確認してください。

error.responseオブジェクトはありません。

return this.$axios
  .post(postUrl, payload, { responseType: 'json' })
  .then(
    (response) => {
      this.message = `RESP: ${JSON.stringify(response)}`;
    },
    (reason) => {
      this.message = `REAS: ${JSON.stringify(reason)}`;
    }
  )
  .catch((err) => {
    this.message = `CATCH: ${JSON.stringify(err)}`;
  });

ペイロードにHTTP422をトリガーするための意図的な不正な値が含まれています。これは、Postmanでは期待どおりに機能し、サーバー（LB4）は入力データが間違っていた場所を説明するJSON形式で完全なエラーを返しますが、axiosではerror.responseオブジェクトが未定義です。 。