Fetch API

fetch を分かりやすく

fetch は、Web API の 1 つで、JavaScript で HTTP リクエストを送信し、サーバーからデータを取得することができます。fetch は Promise を返すため、非同期通信が可能です。fetch はブラウザの標準 API のため、ライブラリやフレームワークを必要としません。

JavaScript の標準機能として提供されており、簡潔で直感的な記述方法が特徴です。Fetch API を使用することで、XHR(XMLHttpRequest)による HTTP リクエストに代わり、より簡単に HTTP 通信を行うことができます。

fetch の使い方

fetch は、以下のように URL を引数として fetch 関数を呼び出すことで使うことができます。fetch 関数は、Promise を返すため、then メソッドや async/await を使って非同期処理を行うことができます。

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

上記のコードは、https://jsonplaceholder.typicode.com/posts からデータを取得し、JSON 形式でコンソールに表示する例です。fetch メソッドは、HTTP メソッドを指定するための第 2 引数を持っています。例えば、以下のように POST メソッドを使うことができます。

fetch('https://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.log(error))

TypeScript で fetch を使う方法

fetch には型定義がないため、TypeScript で fetch を使う場合は、型定義をインストールする必要があります。fetch には何種類かの型定義がありますが、ここでは@types/node-fetchを例に取ります。

npm install --save-dev @types/node-fetch

型定義をインストールしたら、以下のように fetch を使うことができます。

import fetch from 'node-fetch'

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

上記のコードは、Node.js で fetch を使う場合の例です。ブラウザで fetch を使う場合は、import するモジュールが異なるため注意してください。