備忘録

備忘録

FetchAPIを使ってGET/POSTする方法

Ⅰ. はじめに

タイトルの通り「FetchAPIを使ってGET/POSTする方法」です。
2017/12/16時点でIE11はサポートされていません。
https://caniuse.com/#search=fetch

Ⅱ. GETする

サンプルプログラム
async function Get() {
  var url = 'https://jsonplaceholder.typicode.com/posts/1';
  var response = await fetch(url);
  // var response = await fetch(url, { credentials: 'include' }); /* cookie を含める場合 */
  var body = await response.text();
  console.log(body);
}
実行結果

f:id:kagasu:20171216163634p:plain

Ⅲ. POSTする

サンプルプログラム
async function Post() {
  let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'post',
    headers: { 'Content-type': 'application/json; charset=UTF-8' },
    // credentials: 'include' /* cookie を含める場合 */
    body: JSON.stringify(
    {
      userId: 12345,
      title: 'hi',
      body: 'hello world'
    })
  })
  var body = await response.text();
  console.log(body);
}
実行結果

f:id:kagasu:20171216163655p:plain