導入
Fetch API は、Web アプリケーションがサーバーと対話し、ネットワーク経由でコンテンツを取得する方法における大きな進化を表しています。 XMLHttpRequest (XHR) の最新の代替手段として導入された Fetch API は、開発者により強力な機能、柔軟性、シンプルさを提供します。最新のブラウザに統合された Fetch は、現代の Web アプリケーションを構築する上で重要なツールとなり、より自然で効率的な非同期操作の処理を可能にします。

Fetch API とは何ですか?
Fetch API は、HTTP リクエストの送信とネットワーク応答の処理を簡素化する JavaScript インターフェイスです。複雑さと扱いにくい構文で悪名高い古い XMLHttpRequest とは異なり、Fetch は JavaScript の Promise API とシームレスに統合する合理化されたインターフェイスを提供します。この統合により、非同期操作の管理が容易になるだけでなく、コードの可読性と保守性も向上し、コードベースがよりクリーンで管理しやすくなります。

Fetch の核心は、ネットワーク リクエストを送信する最新のブラウザで利用できるグローバル関数である fetch() 関数を中心に構築されています。この関数は、Response オブジェクトに解決される Promise を返し、開発者が応答データ、ヘッダー、ステータスに簡単にアクセスできるようにします。これにより、ネットワーク リクエストの結果を処理するための、より直感的で組織的なアプローチが可能になります。 （続きを読む）

基本構文
Fetch API は、シンプルかつ強力になるように設計された fetch() 関数を中心に展開します。この関数はネットワーク リクエストを開始するために使用され、2 つの主要な引数:

• URL: 取得するリソースの URL 文字列。
• オプション (オプション): HTTP メソッド、ヘッダー、本文コンテンツ、モードなど、リクエストのさまざまな設定または構成を含むオブジェクト。

単純なフェッチ呼び出しの構造
基本的なフェッチ呼び出しは簡単で、次のようになります:

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• url は取得するリソースのアドレスです。
• then() メソッドは、Fetch API によって解決された Promise を処理し、Response オブジェクトを提供します。
• catch() メソッドは、リクエスト中に発生する可能性のあるエラーを処理します。

基本的なフェッチ リクエストの例

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

この例は、成功時に応答がコンソールに記録され、エラーが適切に処理される、単純なフェッチ リクエストがどのように行われるかを示しています。

フェッチを使用する理由

Fetch を使用する利点

Promises: Fetch の最も重要な利点の 1 つは、Promises の使用です。 Promise は、XHR のコールバック ベースのアプローチと比較して、非同期タスクを処理するためのよりクリーンで管理しやすい方法を提供します。 Promises を使用すると、成功した応答を処理するための .then() メソッドとエラーを管理するための .catch() メソッドを連鎖させることができ、その結果、コードがより読みやすく、デバッグが容易になります。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

さらに、Fetch API は async/await 構文とうまく組み合わせて、非同期コードをさらに簡単にします。

async/await を使用した例:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

よりクリーンな構文: Fetch は、XHR に比べて冗長ではない最新の構文を提供します。 fetch() に渡される構成オブジェクトにより、HTTP メソッド、ヘッダー、本文コンテンツなどのリクエスト パラメーターを簡単に設定できるため、コードがよりクリーンで保守しやすくなります。(全文を読む

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

ストリーム処理: Fetch は応答ストリーミングをサポートしているため、開発者は大量のデータをより効率的に処理できます。 XHR は大きな応答に対処できず、パフォーマンスの問題が発生したり、チャンクでの処理に追加の処理が必要になったりする可能性がありますが、Fetch の Response オブジェクトには、チャンクでデータを読み取るための .body.getReader() などのメソッドが用意されています。これは、大規模なデータ セットのストリーミングと管理に特に役立ちます。

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

記事全文を読む – ここをクリック

結論
Fetch API は、開発者が Web アプリケーションでネットワーク リクエストを行う方法に革命をもたらしました。 Fetch は、よりクリーンな構文、Promises とのシームレスな統合、および async/await やストリーミングなどの最新機能のサポートにより、HTTP リクエストを処理するための強力かつ柔軟なツールを提供します。 Web 開発が進化し続けるにつれて、Fetch API は効率的で保守可能な最新の Web アプリケーションを構築する上で重要なコンポーネントであり続けるでしょう。