fetch でデータを取る

非同期JavaScript：API通信とモジュール / 全 5 枚

非同期JavaScript：API通信とモジュール - fetch でデータを取る

待つ場所が 2 回ある

fetch を呼ぶと、まず返事の入れ物が返ってきます。その入れ物にはまだ中身が入っていないので、もう一度待って本文を取り出します。await を 2 回書くのは、届くタイミングが 2 段になっているからです。

送っている中身と返ってくる中身が、それぞれどんな形をしているのかを次の枚で見ます。

1 行目で入れ物が届き、2 行目でようやく中身が取り出せます。

const res = await fetch("https://yumesaku.tech/course-api/profile.json");
const profile = await res.json();
console.log(profile.name); // "山田 結"

1 / 5

← → キーでも送れます