🌐

[JavaScript] XMLHttpRequestとFetch APIの比較

に公開
JavaScript
API
fetch
XMLHttpRequest
tech

今回はXMLHttpRequest(XHR)とFetch APIを簡単に比較していこうと思います。

比較表

項目 XMLHttpRequest（XHR） Fetch API
記述量 冗長で読みづらい シンプルで読みやすい
Promise対応 なし（コールバックが必要） あり（async/awaitが使える）
ストリーミング対応 面倒 ReadableStreamで簡単に扱える
モダンAPIとの連携 制限が多い AbortController などと組み合わせ可
JSONの扱い JSON.parse() で手動変換が必要 .json() メソッドで簡単に取得
可読性・保守性 コールバックネストしがち フラットに書けて保守しやすい

XHRを使用する場面

  • IE11など古いブラウザ対応が必要なとき（使っている人はほぼいない）
  • レガシーなライブラリやコードベースを引き継いでるとき
  • 同期リクエストが本当に必要なケース（通常は避けるべき）

結果

axiosなどもあるので、個人的には今はほぼ活躍しないWeb APIだと思いました。
XHRを見かけたら、だいたい「古いコードなんだな」と思って良いですね。
もし「これからXHRで書こうと思います」とか言ってる人がいたら、やんわり止めてあげましょう(笑)

Discussion