JavaScript Fetch API

1. Fetch API とは

Fetch API インターフェースを使用すると、ウェブブラウザからウェブサーバーに対して HTTPリクエスト を行うことができます。

😀 これにより、もはや XMLHttpRequest を使用する必要はなくなりました。

2. ブラウザのサポート状況

fetch() は ES6 (ECMAScript 2015) の機能です。

ES6 は、2017年6月以降、すべてのモダンブラウザでフルサポートされています：

3. Fetch API の実装例

以下の例では、ファイルをフェッチ（取得）し、その内容を表示します。

実装コード

// ファイルを取得し、テキストとして処理した後に表示関数へ渡す
fetch(ファイル名)
.then(x => x.text())
.then(y => myDisplay(y));

3.1 Async と Await による記述

Fetch は Promise（プロミス） に基づいているため、上記の例は async と await を使用すると、より直感的に理解しやすくなります。

実装コード

async function getText(ファイル名) {
  // レスポンスが返るまで待機
  let x = await fetch(ファイル名);
  // テキストへの解析が完了するまで待機
  let y = await x.text();
  // 解析結果を表示関数に渡す
  myDisplay(y);
}

3.2 変数名による可読性の向上

さらに、x や y といった抽象的な名前の代わりに、意味の通じる変数名を使用することで、コードの品質をより高めることができます。

実装コード

async function getText(ファイル名) {
  // フェッチしたレスポンスオブジェクトを格納
  let myObject = await fetch(ファイル名);
  // 抽出したテキストデータを格納
  let myText = await myObject.text();
  // 最終的な表示処理を実行
  myDisplay(myText);
}