👍 asyncは深化を待つ

このコンテンツは、async awaitシリアル/パラレルの拡張である.

4つの異なるasyncは深化する必要がある.

は直接

を行う.

10秒後に

を行う.

5秒後に

を行う.

5秒後(promise.all)

1.直接行う

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

async function getApple(){
  await delay(5000);
  return 'apple';
}
async function getBanana(){
  await delay(5000);
  return 'banana';
}

async function pickFruits(){
  const a = await getApple();
  const b = await getBanana();
  return `${a} + ${b}`;
}

pickFruits().then(console.log)

apple + bananaが出力されます.
プロセス
pickFruitsを実行するときはまずgetAppleを表示します
delay関数を表示するとdelay関数が見つかります
resolutionまたはsettimeoutなどの後の関数でresolutionをチェックすると、すぐに戻ります.したがって、次の文appleですぐに戻り、getBanna関数を実行し、同様にすぐに戻ります.
ダイレクト出力a+b人apple+banana.
2.10秒後

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

async function getApple(){
  await delay(5000);      //delay의 resolve가 setTimeout에 의해 기다리나 => 기다린다. return 늦게
  return 'apple';
}
async function getBanana(){
  await delay(5000);      //delay의 resolve가 setTimeout에 의해 기다리나 => 기다린다. return 늦게
  return 'banana';
}

async function pickFruits(){
  const a = await getApple();     //await에 의해 getApple의 return 잠깐 기다려 => 대기
  const b = await getBanana();    //5초뒤 진행되면 getBanana의 return 잠깐 기다려 => 대기
  return `${a} + ${b}`;
}

pickFruits().then(console.log)

apple + bananaは10秒後に出力されます.
プロセス
pickFruitsを実行するときはまずgetAppleを表示します
delay関数を表示するとdelay関数が見つかります
後で関数(resolutionやsettimeoutなど)内で行うresolutionをチェックします.settimeoutにはresolutionがあるので、すべての待機状態を維持し、5秒後にappleに戻ってaに入れます.
getBannaを実行するとsettimeoutにresolutionがあり、すべての待機状態を維持し、5秒後にbananaに入れ、a+bを出力します.
出力には合計10秒かかります.
3.5秒後

// 5초

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

async function getApple(){
  await delay(5000);
  return 'apple';
}
async function getBanana(){
  await delay(5000);
  return 'banana';
}

async function pickFruits(){
  //promise를 만드는 순간 바로 실행이된다. (서로에게 연관을 주지않고)
  const applePromise = getApple();
  const bananaPromise = getBanana();

  const a = await applePromise;
  const b = await bananaPromise;
  return `${a} + ${b}`;
}

pickFruits().then(console.log)

apple + bananaは5秒後に出力されます.
プロセス
この関数はawaitとして定義されず、各promiseの作成時に直ちに実行され、並列処理の値がa、bに渡され、出力される.
それぞれ5秒、5秒後に出力します.
4.5秒後に実行(承諾.all)

//5초 Promise.all

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

async function getApple(){
  await delay(5000);
  return 'apple';
}
async function getBanana(){
  await delay(5000);
  return 'banana';
}

function pickAllFruits(){
  return Promise.all([getApple(),getBanana()])
    .then(fruits=>fruits.join(' + '))
}
pickAllFruits().then(console.log);

apple + bananaは5秒後に出力されます.
プロセスPromise.allにより、各並列実行が行われ、処理後の値が戻され、各値は5秒、5秒後に出力される.
整理する
async awaitまず最初のawaitの内容をチェック
これはresolveが戻るかsettimeoutかによって異なります
別の次の待機がすぐに戻る場合は、進行を待つのではなく、settimeoutが影響を受ける場合は、対応する時間を待機し、次の待機を実行します.(シリアル)