fetchメソッドの基本的な使い方【クエリパラメータとリクエストボディの使い分け】

JavaScriptで非同期で外部にアクセスしてJSONデータを取得する際に使用するのがfetchAPIです。そのfetchメソッドについて理解している人は、まだまだ少ないと思うのでこの記事では

• fetchの使い方
• クエリパラメータの追加方法
• クエリパラメータとリクエストパラメータの使い分け

これらのことについて解説していきます。

fetchとは?

まずfetchとは何なのかというと、非同期で外部のリソースを取得するためのメソッドです。このメソッドを使うことでWeb APIのJSONデータなどを取得できます。

第1引数は必須で取得したいリソースのパス(URL)を指定します。第2引数は任意でリクエストに適応したい設定のオブジェクトを渡すことが可能です。これによりPOSTやGETなどのメソッドやリクエストに追加したい本文のbodyを設定できます。

そして、戻り値にはPromiseが返却。そのため、Web API等などから返却されたデータの取得方法2つあります。

• then
• async/await

then

() => {
  const url = "http://localhost:3000/api/user";
  const params = {method : "POST", body : JSON.stringify({id : "123", name:"しゅう"})};
  fetch(url, params)
    .then(response => response.json())
    .then(data => console.log(data));
}

async/await

async () {
  const url = "http://localhost:3000/api/user";
  const params = {method : "POST", body : JSON.stringify({id : "123", name:"しゅう"})};

  const response = await fetch(url, params);
  const data = await response.json();
  console.log(data);
}

可読性を上げたいと考える人はasync/awaitを使うのがおススメです。

クエリを追加したい場合

クエリパラメータを追加したい場合は、URLSearchParamsを使います。URLSearchParamsは連想配列からクエリパラメータを作成してくれるAPIです。

const params = {q : "嫌われる勇気"};
const query = new URLSearchParams(params);

//「https://www.googleapis.com/books/v1/volumes?q=嫌われる勇気」にアクセス
const response = await fetch (`https://www.googleapis.com/books/v1/volumes?${query}`);
const data = await response.json();
console.log(data);

リクエストパラメータやリクエストボディの使い分け

Web APIでパラメータを操作するとき2つの方法が出てきました。

• クエリパラメータ
• リクエストボディ

これらの使い分けがどんな場面で使われるのかについて解説していきます。

1.クエリパラメータを使うとき

クエリパラメータを使うのは一覧データを取得する場面です。そのため、RESTの思想に基づくとGETメソッドが主になります。

• 検索
• ソート
• ページング

検索処理

const params = {q : "嫌われる勇気"};
const query = new URLSearchParams(params);

const response = await fetch (`https://www.googleapis.com/books/v1/volumes?${query}`);
const data = await response.json();

2.リクエストボディを使うとき

リクエストボディはリソースの更新や作成に使われます。そのためクエリとは違い、PUTメソッドやPOSTメソッドが当てはまります。ちなみに、HTTPメソッドがGETだとリクエストボディが使えないので注意が必要です。

• データ作成
• データ更新

登録処理

  const url = "http://localhost:3000/api/user";
  const params = {method : "POST", body : JSON.stringify({id : "123", name:"しゅう"})};

  const response = await fetch(url, params);
  const data = await response.json();

まとめ

• fetchは外部リソースを取得するためのAPI
• fetchメソッドの戻り値はPromise型なのでthenもしくはasync/awaitを使う
• HTTPメソッドがGETの場合クエリパラメータを使い、それ以外はリクエストボディを使う。

参考

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams

https://qiita.com/sakuraya/items/6f1030279a747bcce648