たけるのプログラミング

作ったものとか、気ままにアップします。

【JavaScript】Asyncとawaitを試す【殴り書き】

Async

関数の前にasyncを付けることによってpromiseを返すようになる。例えばreturn 'hello'とすると

      async function hello()
      {
          return 1;
      }

      console.log(hello());

実行結果

return <非 promise> がある場合、JavaScript は自動的にその値を持つ 解決された promise にラップします。

Async/await より引用

Await

Promiseの結果(fulfilled rejected)が確定するまで、待機する。
awaitはasyncが付いている関数の中で使うことができる。

      async function hello()
      {
          let x = await new Promise((resolve)=>{
              setTimeout(() => {
                  resolve('hello');
              }, 10000);
          });
          console.log(x);
      }
      hello();

実行結果にhelloと表示される。resolveでfulfilledの状態になったPromiseのPromiseResultの値が変数xに代入される。
awaitでresolveになるまで処理を止めた訳ですが、awaitを無くしたらどうなるのか。
結論は解決(resolve)するのを待たずに、promiseインスタンスが代入される。
10秒待たずにconsole.logが実行される。

async function hello()
      {
          let x = new Promise((resolve)=>{
              setTimeout(() => {
                  resolve('hello');
              }, 10000);
          });
          console.log(x);
      }
      hello();

実行結果

※10秒経つとresolveされるので、開発者ツールで上記に出力したインスタンスのPromiseStateを見るとfulfilledの状態になっています。