今や非同期通信の花形と言われている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の基本的な構成になります。今までの非同期通信の中で一番見やすく
使いやすいのでこれからも重宝しますね、この子は。
