Open3

async/awaitを自分なりに理解する

arabyaraby

fetch

fetchを利用する際にも、async/awaitは使用される。

async function getUserAccount() {}の中で、
const response = await fetch('https://example.com/user');など。

  • fetchはサーバにリクエストを送信する非同期関数
  • 普通はfetchを実行してもレスポンスが返ってくるのを待たずに次の行を実行
  • fetchの前にawaitをつけることで、fetchの処理が最後まで完了してから次の行を実行させることができる
  • awaitしたいときは今書いている関数にasyncをつけてあげる必要があるので、async/awaitはセットで使う
  • 非同期関数が出てきたらawaitを使う、awaitを使いたいからasyncをつける

https://www.cview.co.jp/cvcblog/2022.05.30.488_DPHMY7ikiNc7KhEO1

arabyaraby

通常通りsetTimeoutを行った場合

function test() {
  console.log("before timeout"); // 1

  setTimeout(function () {
    console.log("timeout"); // 3
  }, 2000);

  console.log("after timeout"); // 2
}

test();

async awaitを使用した場合

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function asyncTest() {
  console.log("before timeout"); // 1

  await delay(2000);
  console.log("timeout"); // 2

  console.log("after timeout"); // 3
}

asyncTest();