fetch - 駆け出しのエンジニア日記

Fetch API・・・

JavaScript を使ってサーバーに HTTP リクエストを送信できるインターフェースで、指定した URL からリソース（データ）を取得することができます。

また、Promiseをサポートしています。

XMLHttpRequestと同様の機能を持ちますが、よりシンプルで柔軟な API です。

今回はFetchの使い方を簡単にまとめてみます。

HTTP リクエスト・・・WebブラウザからWebサーバに対して出されるお願い

HTTP レスポンス・・・WebブラウザからWebサーバに対して出されるお願いに対するWebサーバからの返事

URL・・・HTTPリクエストの宛先を表す住所のようなもの

また、HTTPリクエストで利用されているHTTPメソッドは、GET、POSTの2種類です。

Webアプリケーションでは、PUT、PATCH、DELETEを、POSTとオプション（付加情報）を組み合わせることで表現しています。

HTTPメソッド・・・対象となるリソースに対し、「何をしたいか」を指示します。

GET・・・リソース情報を取得

POST・・・新しいリソース情報を送り込む

PUT・・・リソース情報を新しい情報で置き換える

PATCH・・・リソース情報の一部を新しい情報で書き換える

DELETE・・・リソース情報を削除

早速fetchを使ってみます。

下記のように記述すればリクエストを投げることができます。そしてPromiseが返ってきているのも確認できます。

fetch() メソッドの第1引数には取得するリソースの URL を設定します。（第2引数は省略可能）

fetch() メソッドは Promise を返すのが確認できたので、Promise オブジェクトの then() メソッドに必要な処理を記述して実行することができます。

サンプルの続きです。

fetch(' https://api.tvmaze.com/search/shows?q=girls')
 .then(res => {
 console.log('レスポンスヘッター取得', res);
 return res.json();
 })
 .catch(e => {
 console.log('エラー！！', e);
 })

上記の場合、fetch() メソッドで取得した結果（Response オブジェクト）は response として then() メソッドのコールバック関数の引数に渡されます。

then() メソッドでは、取得した結果（response）を Response オブジェクトの json() メソッドを使って解析して、その結果（JSON オブジェクト）を return しています。

せっかくなので async と await を使って記述も行ってみます。

const fetchTvScore = async () => {
 try {
 const res = await fetch('https://api.tvmaze.com/search/shows?q=girls');
　　　//await で fetch() が完了するまで待つ
 const data = await res.json();
　　　//await で response.json() が完了するまで待つ
 console.log(data);
 } catch (e) {
 console.log('エラー！！', e);
 }
}
fetchTvScore();