1月29日(木)1コマ目

今日、やったこと

JavaScriptの同期・非同期処理

今日のホワイトボード

サンプル

以前作成したサンプル(書籍情報)に以下を追加。

test.htmlを表示すると、ID=1の書籍を検索して、表示する。

test.html

test.js

test.htmlを表示すると、以下のようになる。

図　サンプル表示結果

fetch()関数は

fetch()関数は非同期処理。

サーバーにリクエストを送信後、レスポンスを待たずに次の処理を行う。

test.jsのgetBook()関数は以下のように、①->②->③->④の順に動く。

図　fetch()関数は非同期処理

レスポンスを受け取るまで待つ

fetch()関数がリクエストを送信後、レスポンスを受け取るまで次の処理を行わないようにしたい。

キーワード await をつけると、非同期処理->同期処理になる。

キーワードawaitを含む関数には、キーワードasyncを付与する。

test.js

表示すると、下図のようにちゃんと結果が表示される。

図　非同期処理->同期処理　表示結果

非同期処理のままで動くようにしたい

レスポンスを受け取ったタイミングで表示すればいい。

test.js

これでもちゃんと結果が表示される。

図　非同期処理改造版　表示結果

次回は

評価用課題をまた作ってもらいます。