0
0

【JavaScript】fetch APIとは

Posted at

fetch APIとは

Fetch APIは、Webブラウザーに組み込まれたJavaScriptの新しい機能で、ネットワークリクエストを発行し、サーバーからデータを取得するための方法を提供します。Fetch APIは、従来のXMLHttpRequest(XHR)を置き換えるものとして導入されました。Fetch APIを使用することで、より強力で柔軟なネットワークリクエストを行うことができます。

特徴

Fetch APIの主な特徴は以下のとおりです:

1. PromiseベースのAPI : Fetch APIはPromiseベースのAPIです。これにより、非同期処理をより効果的に扱うことができます。データの取得が完了すると、Promiseが解決され、その結果を処理することができます。

2. シンプルなAPI : Fetch APIはシンプルなAPIを提供し、リクエストを送信するためのfetch()関数を提供しています。この関数を使用して、リクエストを送信し、サーバーからのレスポンスを取得することができます。

3. HTTPリクエストとレスポンスのコントロール : Fetch APIはHTTPリクエストとレスポンスを柔軟に制御する機能を提供します。ヘッダーの設定、クエリパラメーターの追加、HTTPメソッドの指定など、さまざまなオプションを使用してリクエストをカスタマイズすることができます。

4. JSONの自動パース : Fetch APIは自動的にJSON形式のレスポンスをパースし、JavaScriptオブジェクトに変換します。これにより、サーバーからのJSONデータを簡単に処理することができます。

使用方法

以下は、Fetch APIを使用してGETリクエストを送信し、サーバーからのJSONレスポンスを取得する例です:

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

この例では、fetch()関数を使用してサーバーにGETリクエストを送信し、サーバーからのJSONレスポンスを取得します。その後、Promiseチェーンを使用して、レスポンスをJSON形式にパースし、データをコンソールに出力します。また、エラーハンドリングも行われています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0