Fetch APIでPOSTリクエストを送信するには？

POSTリクエストは、データを更新したり、変更したりする時によく使われています。また、Fetchは非常に汎用されているJavaScriptのAPIリクエストライブラリーとして、Fetch APIでPOSTリクエストを送信する必要があるユーザーは少なくありません。そこで本稿では、Fetch APIを用いてPOSTリクエストを送信する方法を解説します。

button

JavaScriptでのFetch APIとは

そもそもFetch APIとは何かを見に行きましょう。FetchはJavaScript でHTTP ネットワークリクエストを行うためのインターフェイスです。現在、Fetch APIは、iOSやAndroidなどのモバイルアプリ開発においてもFetchは必要不可欠なAPIとして使用されています。主に次のような特徴があります。

ブラウザとNode.jsの両方で利用できる
Promiseベースで書けるため非同期処理が扱いやすい
XHRよりコードがシンプルに書ける
レスポンスの本文をstreamで取得できる

基本的な使い方は下記のようになります。

fetch(url, options) 
  .then(response => {
    // responseを処理
  })
  .catch(error => {
    // エラーハンドリング
  });

urlにリクエストを送信したいエンドポイントを指定
optionsにリクエストのカスタマイズオプションを指定できる
レスポンスがPromiseを返すのでthenで受け取れる

Fetch APIでPOSTリクエストの送信

Fetchは、ブラウザと互換性が良いJavaScript言語ベースのライブラリーとして、現在のブラウザにデフォルトで実装されているため、特にライブラリーをインストールしなくても、直接にブラウザがそれを実行できます。これにより、FetchがWeb開発で広く利用されています。

それでは、Fetch APIでPOSTリクエストを送信するには、どうしたらいいですか？

fetch()メソッドの2番目のパラメータにリクエストの詳細を指定します。

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data) 
})

ここで、リクエストボディにはJSONデータを設定しています。

FetchでPOSTリクエストのBodyデータを設定

Fetch APIでPOSTリクエストのボディを設定する際に利用できる主なデータフォーマットは以下の通りです。

JSON
FormData
x-www-form-urlencoded
Blob
ArrayBuffer
URLSearchParams

正常にリクエストを送信するには、ボディ内のデータフォーマットによって、Headerで適切なContent-typeを設定する必要がありますので、要注意！

FetchでJSONデータをPOST

Fetch APIでJSONデータをPostする場合は、次のように、Bodyで具体的なJSONデータを記述して、Bodyで「JSON.stringify(body)」を指定する必要があります。

const body = {
  name: 'John',
  age: 30 
};

fetch(url, {
  method: 'POST',
  body: JSON.stringify(body)
});

FetchでFormDataデータをPOST

FormDataでフォームデータを送信する場合、次のような実装コードになります。

const formData = new FormData();
formData.append('name', 'John');

fetch(url, { 
  body: formData 
});

FetchでバイナリデータをPOST

Blob形式を使うことで、バイナリデータを設定して送信できます。その実装コードは次：

const blob = new Blob([fileData]);

fetch(url, {
  body: blob
});

また、ArrayBufferはLowLevelなバイナリデータを扱えます。

FetchでURLSearchParamsをPOST

URLSearchParamsはGETのクエリ文字列のようにパラメータを設定できます。一方、x-www-form-urlencoded はフォームデータをHTTPリクエストボディに含めるための仕様です。形式は key1=value1&key2=value2 とクエリ文字列と同じですが、スペースは + で表され、一部の文字は % エンコーディングされる点が異なります。

URLSearchParams を使ってフォームデータを構築し、それを x-www-form-urlencoded 形式でエンコードして送信することができます。具体的には以下のようになります。

const formData = new URLSearchParams();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

const body = formData.toString(); // 'key1=value1&key2=value2'

fetch('/path/to/server', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: body
})

URLSearchParams を使うと、フォームデータを構築する際に自動的にエンコーディングされるので、プログラマーが手動でエンコーディングする必要がありません。また、append() メソッドを使えば簡単にデータを追加できるメリットがあります。

上記のように、URLSearchParams は x-www-form-urlencoded 形式のデータを構築する際に便利なツールですが、必須ではありません。文字列操作で同じ形式を構築することも可能です。

このようにFetch APIでは様々なデータをPOSTリクエストのボディに設定して送信できるため、用途に応じたフォーマットを選択できる利点があります。

Fetch APIの実装コードの自動生成

Fetch APIの実装コードを書くのが面倒くさくて嫌だと思っているかもしれません。その場合は、使いやすいAPI管理ツールのApidogを使って、1クリックだけで、APIの定義書からFetch APIの実装コードを生成してくれます。

button

また、Apidogというツールは、非常に直感的なUIでAPIを簡単にテストすることもできるため、APIの疎通確認をした上、Fetchの実行コードを生成することで、作業の効率性もかなり向上できるのではないでしょう。

ステップ⒈Apidogで実装したいAPIをクリックして、右側パネルで「コード生成」にガーソルを置き、「クライアントコードを生成」を選択します。

ステップ⒉コード生成ウィンドウで、「JavaScript」を選択し、「Fetch」を選択すると、当該APIのFetch実装コードを生成してくれます。

button

ApidogでFetch POSTリクエストの実装コードの生成例

次は、ApidogがAPIの定義や仕様に自動生成したFetchのPOSTリクエストの実装コードになります。

var myHeaders = new Headers();
myHeaders.append("User-Agent", "Apidog/1.0.0 (https://apidog.com)");

var urlencoded = new URLSearchParams();
urlencoded.append("name", "Hello Kitty");
urlencoded.append("status", "sold");

var requestOptions = {
   method: 'POST',
   headers: myHeaders,
   body: urlencoded,
   redirect: 'follow'
};

fetch("http://127.0.0.1:3658/m1/424554-0-default/pet", requestOptions)
   .then(response => response.text())
   .then(result => console.log(result))
   .catch(error => console.log('error', error));

現在のブラウザでもFetchライブラリーをプリーインストールされるため、日常的によく使われるChromeかFirefoxなどのブラウザのコンソールの中で、上記のFetch実装コードを直接に実装することもできますね。

まとめ

本記事では、Fetch APIを使ってPOSTリクエストを送信する方法について解説しました。Fetch APIはJavaScriptでのHTTP通信を実現するウェブ標準のインターフェイスです。Promiseベースの非同期設計が大きな特徴で、レスポンスデータもストリーム型で扱えます。また、POSTリクエストの送信にはfetch()に処理の詳細をオプションで指定します。ボディにはJSON、FormData、Blobなど複数のフォーマットを設定できます。

コード生成ツールのApidogを活用することで、API定義からいち早くFetchによる通信処理の実装が可能です。GUIベースで簡単にAPIを操作し、そこからコードを生成できるため大きなメリットがあります。

button