かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript axios エラー時にもレスポンスを使いたい。

axios で API に接続している時 status 400 などでレスポンスが返ってくると catch 節で取得できるのですが、その際にも API から返される値を使いたい時のメモ

e.g. status 400 が返される時

API (Express)

router.post('/api', (req, res) => {
  // … 処理
  return res.status(400).send('エラーだよ');
});

フロント

try {
  const res = await axios.post(API_PATH, data);
} catch (err) {
  console.log(err, err.message);
}

APIエラーだよ を送っているが、status 400 で返ってきた時の err は次のような感じになる。

> POST http://localhost:3000/api/ 400 (Bad Request)
Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)
"Request failed with status code 400"

APIが送っている「エラーだよ」のメッセージを使いたい…

error.response を使う

エラー時に catch に入ってくる エラーオブジェクトは .response プロパティを持っていて、その中の response.data には API が send した内容が入っている。

フロント

try {
  const res = await axios.post(API_PATH, data);
} catch (err) {
  const errorMessage = err.response.data || err.message;
  console.log(errorMessage); // => "エラーだよ"
}

これで、エラーで cartch 節に処理が流れても API が送るデータを扱えるようになりました!✌️₍ ᐢ. ̫ .ᐢ ₎✌️
この方法なら status 200 で返すオブジェクト内に エラー判別をするプロパティを作らなくて済むのでとても見通しがいい感じです