【javascript】axiosで成功時とエラー時の処理を分けて受け取る方法

今や非同期通信の花形と言われているaxiosですが、今回はそのaxiosの

レスポンスをプロミスで受け取り、成功時とエラー時の処理を分けて結果を

受け取る方法を書いていきます。

今開発しているアプリで非同期ベースにしているのが以下のやりかた。

try {
const response = await axios.get(‘https://your.site/api/v1/bla/ble/bli’);
// 成功時
console.log(response);
} catch (error) {

//エラー時

}

await.asyncというのが頭についていますが、これはコールバックにありがちな

ネストを避けるために使われるもの。これとpromiseを一緒に使うことで可読性が

格段に増します。

try内で成功時の処理結果、catch内でエラー時の処理結果を受け取ることができます。

受け取れるエラーの種類は以下三つ。

エラー内容とスタッツ、ヘッダーとなっています。

どの種類のエラーがきたか確認をして処理を分けることができます。

console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);

なお、try内ではifを使って真偽判定をするとtry内の処理から抜け出せなくなるので

注意しましょう。

以上がaxiosの基本的な構成になります。今までの非同期通信の中で一番見やすく

使いやすいのでこれからも重宝しますね、この子は。