👍 async await 심화

• 해당 내용은 async awiat 직렬/병렬의 확장이다.

---

4가지의 async await 심화

1. 바로진행
2. 10초 뒤 진행
3. 5초 뒤 진행
4. 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함수가
바로 리턴하는 resolve냐 or setTimeout같은 함수내에서 이따가 진행하는 resolve냐를 체크하는데 바로 리턴하므로 그 다음 문장인 apple로 리턴을 바로하고 getBanana함수를 실행 후 마찬가지로 바로 리턴하여
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함수가
바로 리턴하는 resolve냐 or setTimeout같은 함수내에서 이따가 진행하는 resolve냐를 체크하는데 setTimeout 안에 resolve가 있으므로 전부 대기하는 상태를 유지하고 5초 뒤 apple을 리턴하고 a에 넣고 마찬가지로
getBanana를 실행하면서 setTimeout 안에 resolve가 있으므로 전부 대기하는 상태를 유지하고 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초 뒤 진행(promise.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 같은 것에 영향을 받냐에 따라
다른 아래의 await가 바로 리턴이면 기다리지않고 진행되고(병렬) setTimeout에 영향을 받으면 해당 시간만큼 기다리고 다음 await을 실행한다.(직렬)