Fetch APIからPOST送信のdataパラメータを設定する２つの方法

JavaScriptでPOSTリクエストを送りたい場合…

AjaxではなくFetch APIを使うことがあります。

そのとき悩むのが次のこと

POST送信時のdataパラメータの渡し方

Ajaxとは少しだけ渡し方が違うので、
記憶を整理するために方法をまとめます。

このページの目次

Ajaxだとdataに直接パラメータを渡せるが…
Ajaxと違ってFetch APIではこれができない
方法１．FormDataでPOSTパラメータを渡す
方法２．JSON文字列でPOSTパラメータを指定
POST・HTTPリクエストなんかの関連記事
やり方が分からないと少し戸惑うかも

Ajaxだとdataに直接パラメータを渡せるが…

AjaxはHTTPリクエストを送るのに超便利です。

例えば適当なRest APIにPOST送信する場合を考えます。

▼ このコード例みたいに簡単に書ける

$.ajax({
  type: "POST",
  url: "https://hoge.com/api/test",
  
  /// こんな風に直接データパラメータを渡せる
  data: {
    param1: "hoge",
    param2: "fuga"
  }
}).dont((msg)=>{
  console.log('msg : ', msg)
});

$.ajax({

type: "POST",

url: "https://hoge.com/api/test",

/// こんな風に直接データパラメータを渡せる

data: {

param1: "hoge",

param2: "fuga"

}

}).dont((msg)=>{

console.log('msg : ', msg)

});

上記コードのようにPOST送信のパラメータをオブジェクトとして渡せます。キー・値のペアを定義するだけだし、とても分かりやすいです。

Ajaxは直観的に分かりやすい

Ajaxと違ってFetch APIではこれができない

一方のFetch APIの場合…

先ほどのAjaxみたいなパラメータ渡しはできません。

▼ こういうコードを書くのはNG

fetch('https://hoge.com/api/test', {
  /// リクエストメソッド
  method: 'POST',
  
  /// NG : 期待通りに動かない！
  body: {
    param1: "hoge",
    param2: "fuga"
  }
}).then(async (response)=>{
  console.log('response : ',await response.json());
}).then((data)=>{
  console.log('data : ', data);
}).catch((error) => {
  console.error('error : ', error);
});

fetch('https://hoge.com/api/test', {

/// リクエストメソッド

method: 'POST',

/// NG : 期待通りに動かない！

body: {

param1: "hoge",

param2: "fuga"

}

}).then(async (response)=>{

console.log('response : ',await response.json());

}).then((data)=>{

console.log('data : ', data);

}).catch((error) => {

console.error('error : ', error);

});

Ajaxに慣れてると動くのを期待してしまいます。

でも残念ながらAjaxのように気が利かないので、bodyにキー・ペアのオブジェクトを渡すことはできません。そして今後も仕様が変わることはないでしょう。

そこで次から紹介する２つの方法が使えます。

方法１．FormDataでPOSTパラメータを渡す

方法の１つ目はFormDataを使うこと

これは後述の方法より少し面倒です。

▼ FormDataを使ったシンプルなPOSTリクエスト例

/// FormData作成
const formData = new FormData();
formData.append('param1', 'hoge');
formData.append('param2', 'fuga');

fetch('https://hoge.com/api/test', {
  method: 'POST',
  
  /// OK : FormDataでパラメータ指定
  body: formData
}).then(async (response)=>{
  console.log('response : ',await response.json());
}).then((data)=>{
  console.log('data : ', data);
}).catch((error) => {
  console.error('error : ', error);
});

/// FormData作成

const formData = new FormData();

formData.append('param1', 'hoge');

formData.append('param2', 'fuga');

fetch('https://hoge.com/api/test', {

method: 'POST',

/// OK : FormDataでパラメータ指定

body: formData

}).then(async (response)=>{

console.log('response : ',await response.json());

}).then((data)=>{

console.log('data : ', data);

}).catch((error) => {

console.error('error : ', error);

});

▼ FormDataに関する詳細

FormData インターフェイスは、XMLHttpRequest.send() メソッドを用いることで簡単に送信が可能な、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは、エンコーディングタイプを "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。

引用元　：　https://developer.mozilla.org/ja/docs/Web/API/FormData

キー・値のペアセットを構築するために用意されています。普通にオブジェクトを渡せば？と思うけど、パラメータ変数を安全に構築する目的もあるかも

あとFormData.append()でファイル送信も可能です。

▼ 詳しくはFormData.append()を参照

developer.mozilla.org

FormData.append() - Web API | MDN

https://developer.mozilla.org/ja/docs/Web/API/FormData/append

インターフェイスの append() メソッドは、FormData オブジェクト内の既存のキーに新しい値を追加するか、キーがまだ存在しない場合は追加します。

ユーザーから選択されたFileを直接渡せるので、
自分でアレコレしなくていいのが利点かもしれません、

方法２．JSON文字列でPOSTパラメータを指定

これはAjaxに近いやり方です。

キー・値のPOSTパラメータを定義、
それを文字列化してbodyに指定する方法です。

言葉だと分かりにくいのでコード例を載せます。

▼ JSONでPOSTパラメータ指定するリクエスト例

fetch('https://hoge.com/api/test', {
  method: 'POST',
  
  /// 必ずContent-Typeを指定しておく
  headers: {
    'Content-Type': 'application/json',
  },
  
  /// OK : JSONでパラメータ指定
  body: JSON.stringify({
    param1: "hoge",
    param2: "fuga"
  })
}).then(async (response)=>{
  console.log('response : ',await response.json());
}).then((data)=>{
  console.log('data : ', data);
}).catch((error) => {
  console.error('error : ', error);
});