Javascript 非同期 async/awaitの基本2

Async/awaitの欠点を修正

上記は下記コードの実行画像です。

Async / awaitは、
読み取りと保守がより簡単にしてくれます。
コードを同期的に見せ、
awaitは同期動作と同じようにpromiseを果たします。
その間、
他のタスクを実行し続けます。
しかし、
待機中のコードはブロックされます。

このことで、コードの速度が低下する可能性が出てきます。

必要なのは、async / awaitを使用していない場合と同様に、
promiseも同時に処理を開始する必要があります。
promiseが遅れすぎると意味がなくなります。

この問題を軽減するため。
Promise オブジェクトを変数に格納します。

下の例では
response変数に、await fetch('img2.png')を格納しています。



<script>
   async function myFetch() {
   
        let response = await fetch('img2.png');
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        } else {
           return await response.blob();
        }
      }

      myFetch().then((blob) => {　　　　　

        let objectURL = URL.createObjectURL(blob);
    
        let image = document.createElement('img');
       
        image.src = objectURL;
       
        document.body.appendChild(image);

      }).catch(e => console.log(e));

  </script> 


コードの簡単な説明。

async function myFetch()は、
asyncキーワードで、async関数に変換されます。
非同期コードを実行するコードのブロックを定義するために必要です。
thenを使わなくてもよくなったことで、fetchの式を簡略化。

 let response = await fetch('img2.png');は、
 単にfetchにより式を簡略化したものです。
promiseが満たされるまでその行のコードを一時停止します。

return await response.blob();は、
blobで、responseストリームを取得します。
promiseが満たされるまでその行のコードを一時停止します。

let objectURL = URL.createObjectURL(blob);は、
引数で指定されたオブジェクトを表す URL を含む DOMString を生成します。

以上です。