fetchとasyncの復習
取ってくるのは fetch
実践JavaScript でやった fetch を思い出します。書き方は React でも同じです。
const res = await fetch("/api/items");
const data = await res.json();2行とも await が付いています。待つところが2回あるからです。1回目は相手が返事をくれるまで、2回目はその返事の本文を JSON として読み終えるまでです。ここを1つでも忘れると、中身ではなく約束の入れ物 (Promise) が入ってしまい、data.length が undefined になります。
await は async の中でしか書けない
await は async の付いた関数の中にしか書けません。
async function loadItems() {
const res = await fetch("/api/items");
const data = await res.json();
setLog(data.length + " 件");
}React の部品そのものを async にはできません。部品は画面を返すものであって、待つものではないからです。だから中に async な関数を作って、それを呼ぶ形にします。この形はこのあとずっと使います。
返ってくるものを確かめる
/api/items は配列を返します。仕様書の collection が items になっていて、one が付いていないからです。配列なので data.length で件数が取れ、data[0].title で先頭の商品名が取れます。
まだ画面には出しません。今日は取れているかどうかを目で確かめるところまでです。本来はコンソールに出すところですが、プレビューでは画面に出したほうが早いので、log という state に入れて表示します。
演習
ボタンを押したら商品を取ってきて、件数と先頭の商品名を画面に出します。