JavaScript 非同期プロセスの動作

非同期プロセスの動作

fetch()APIは非同期コードの良い実例です。
fetch()メソッドではpromiseが使われています。

下のコードは、
「Fetchの基本」ページのコードから、
説明のため、
fetch()を使用している箇所を抜粋したものです。

詳細は下記ページを参照。
Fetchの基本


...
fetch(url).then(function(response) {
  response.text().then(function(text) {
  　poemDisplay.textContent = text;
　　})
  
  .catch(function(err) {
  console.log('Fetch problem: ' + err.message);
  
});
...


fetch()を使用すると、
promiseが返されます。
promiseは、
「できるだけ早く回答を返すことを約束します」という意味です。

fetch()の後、
2つのthen()ブロックが続きます。
then()は別のpromiseを返します。

各then()では、
前の成功した操作の結果を入力として受け取ります。
複数の非同期操作を順番に実行します。

赤い色のcatch()最後のブロックは、
このページのために追加したものです。

catch()メソッドは、
いずれかのthen()ブロックに障害が発生した場合、
try...catchが実行されます。
catch()により、
発生したエラーの種類を知ることが出来ます。

promiseはここでは3回生成されています。
いずれもPromiseでは次の状態にあります。
pending：初期状態、実行も拒否もされていません。
fulfilled：操作が正常に完了したことを意味します。
rejected：操作が失敗したことを意味します。

pending状態のpromiseは、
イベントキューに入れられます。
イベントキューは、メインスレッドの処理が終了した後に実行されます。

大事なことは、
JavaScriptコードの実行が中断されないことです。
これは、非同期コードを書くとき特に注意すべきことです。