Fetch APIを使ってjQuery.ajaxみたいにデータをpostする

まとめ

URLSearchParamsを使うとできる

jQueryの場合

以下のようにhogeとfooを送りたいとする。

jquery.js

$.ajax({
      url: '/api/tasks',
      type: 'POST',
      data: {hoge: 'fuga', foo: 'bar'},
});

Fetch APIの場合

URLSearchParamsを使う

以下のようにbodyにURLSearchParamsを入れると、Content-Typeも適切に設定される

fetch1.js

let params = new URLSearchParams()
params.set('hoge', 'fuga')
params.set('foo', 'bar')
fetch('/api/tasks', {
    method: 'POST',
    credentials: 'include',
    body: params,
})

直接文字列として書く

ヘッダを設定する必要があるので注意

fetch('/api/tasks', {
    method: 'POST',
    credentials: 'include',
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    body: 'hoge=fuga&foo=bar',
})