Fetch API とは？

WebページのJavaScriptから、サーバーへデータを取りに行ったり、データを送ったりするときに使うよ。fetch()が返すPromiseをawaitで待つと、応答を表すResponseを受け取れるんだ。

最初に受け取るのは、ステータスやヘッダー、本文を扱うResponseだよ。成功か確認してからawait response.json()などで本文を読む。JSONでない本文をjson()で読めば、解析で失敗することもあるんだ。

HTTPの404や500の応答だけでは、fetch()のPromiseはrejectされないよ。response.okは200番台ならtrueになるので、目的に応じてokやstatusを確認しよう。ネットワークエラーやリクエストの中断などは、別に失敗として扱われるんだ。

AbortControllerのsignalを渡しておけば、abort()で中断できるよ。ブラウザで別のオリジンの応答を読むには、相手のCORS設定も関わる。no-corsを指定しても本文を自由に読めるわけではなく、応答が不透明になるんだ。

XMLHttpRequestも引き続き使えるAPIだよ。FetchはPromiseを使う別の方法なんだ。Axiosは追加で導入するHTTPクライアントで、タイムアウトや処理の共通化などの機能がある。Fetchを使うアダプターも選べるけれど、常にFetchだけを包んだもの、というわけではないよ。