本
TypeScript
第11章. HTMLとウェブ
HTTPリクエストの送信

TypeScript:
HTTPリクエストの送信

How to: (方法)

TypeScriptでHTTPリクエストを送るには、fetch APIを使います。下記のコードを見てください:

async function fetchData(url: string): Promise<void> {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetching data error:', error);
  }
}

fetchData('https://api.example.com/data');

サンプル出力:

{
  "userId": 1,
  "id": 1,
  "title": "Sample Data",
  "completed": false
}

Deep Dive (深掘り)

HTTPリクエストの送信はWebの始まりから重要な部分でした。XMLHttpRequest が古典的な方法でしたが、fetch APIはよりモダンな代替手段です。

fetch APIはプロミスを使うので、非同期コードを書きやすくしています。古くからある XMLHttpRequest と比べ、シンプルで読みやすいコードが書けます。もしfetchにまだ慣れていなければ、Axiosなどのライブラリを使うという選択肢もありますが、ネイティブなfetch APIは外部ライブラリに頼らない力強い選択肢です。

実装の詳細に入ると、HTTPリクエストの種類(GET, POST, PUT, DELETEなど)、ステータスコード(200は成功、404は見つからない、等)、ヘッダーやボディの管理など、把握すべきことが多いです。

See Also (関連するリソース)

HTMLの解析基本認証を使用したHTTPリクエストの送信