乐胖代购免代理版

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 で返すオブジェクト内にエラー判別をするプロパティを作らなくて済むのでとても見通しがいい感じです