awaitでfetchを書く、promiseでfetchを書く

はじめに

この記事はJSにおけるfetchの書き方で、awaitとpromiseの書き方で分からなくなった人のために忘備録として記しておく記事です。

fetchの書き方

以下の四つのコードは同じです。

//  promiseの書き方
fetch("http://wttr.in/Fukuoka?format=j1")
  .then(function (res) {
    console.log(res); // => Response
    return res.json();
  }).then(function (json) {
    console.log(json); // => json
  })

// asyncの書き方
// top level awaitは使えないのでasyncの関数で包んでから実行する
async function get_data() {
  const a = await fetch("http://wttr.in/Fukuoka?format=j1");
  console.log(a); // => Response
  const b = await a.json();
  console.log(b); // => json
}

get_data();

//無名関数でasyncを包むパターン
(async function () {
  const res = await fetch("http://wttr.in/Fukuoka?format=j1");
  console.log(res);
  const data = await res.json();
  console.log(data);
})();

// jsonはpromiseを返すのでthenを使っても合法。ただし記法として統一していた方が良いと思う
async function get_data() {
  const a = await fetch("http://wttr.in/Fukuoka?format=j1");
  console.log(a);
  a.json().then((json) => console.log(json));
}

get_data();

覚えておきたいasyncとawaitのルール

• async関数の中でawaitが使える
• awaitを使うと、返り値が来るまでそこで処理を止める(同期っぽく書ける）
• awaitを使うと、promiseの時の.then((res) => res) を省略できる