promise async await 예제

example.js

// promise는 선언과 동시에 실행된다
function asyncFunction(delay, memo) {
  console.log(`in`, memo);
  const thisIsPromise = new Promise((resolve) => {
    setTimeout(() => {
      console.log(`done`, memo);
      resolve(delay);
    }, delay);
  });

  return thisIsPromise;
}

const fetchData = asyncFunction.bind(null, 1000, 'fetchData');
const fetchHeavyData = asyncFunction.bind(null, 3000, 'fetchHeavyData');

function add(a, b) {
  return a + b;
}

async function main() {
  console.log(`start main`);
  console.time(`main`);

  const a = await fetchHeavyData();
  const b = await fetchData();

  const result = add(a, b);
  console.log(`main result`, result);
  console.timeEnd(`main`);
}

async function main2() {
  console.log(`start main2`);
  console.time(`main2`);

  const a = fetchHeavyData();
  const b = fetchData();

  const promiseResultArr = await Promise.all([a, b]);

  const result = add(...promiseResultArr);
  console.log(`main2 result`, result);
  console.timeEnd(`main2`);
}

main();
// main2();

• 친구한테 비동기에 대해 설명하면서 만든 예제 코드다

설명하기

• 비동기 초보 친구한테 설명하면서 어떤 부분을 설명했나?

await은 async함수 내부에서 사용 가능

// 1 work
fetchData().then(console.log);

// 2 not work
const data = await fetchData();
console.log(data);

• 위는 동작하고, 아래는 동작하지 않는다고 해서
• await 키워드 사용은 async 함수 내부에서만 가능하다고 말했다

express에서 비동기

// 1 work...
router.get('/async', function (req, res) {
  asyncFunction(1000, 'memo').then((result) => {
    res.json(result);
  });
});

// 2 work
router.get('/async', async function (req, res) {
  const result = await asyncFunction(1000, 'memo');

  res.json(result);
});

• 1로 했을 때 어떻게 동작하냐 해서
• 2로 하는 게 좋을 것 같다고 했다
• 실제로 테스트 결과 1, 2 모두 잘 동작했다
• 1의 경우 안될 줄 알았는데 express가 똑똑한 건가…

then 콜백 함수에서 return

// 1 not work
async function f() {
  await asyncFunction(1000, 'memo').then((result) => {
    return result;
  });
}

// 2 work
async function f() {
  return await asyncFunction(1000, 'memo').then((result) => {
    return result;
  });
}

• 1의 경우에서 함수 f의 반환 값이 없다 하여,
• then 콜백 함수에서 return이 함수 f의 리턴을 의미하지 않는다고 말했다

체이닝

const a = await asyncFunction(1000, 'memo') // 1000
  .then((result) => {
    return result * 2;
  }) // 2000
  .then((result) => {
    return result + 200;
  }); // 2200

• then을 끝까지 수행한 후에 결괏값을 반환한다고 알려줬다
• a에는 2200이 들어간다

생략 표현

function add1(a) {
  return a + 1;
}

asyncFunction(1000, 'memo').then(add1);
asyncFunction(1000, 'memo').then((res) => add1(res));

• 인자를 그대로 다른 함수에 넘겨주는 경우 생략이 가능하다

Promise.all

// 1
{
  const a = await fetchHeavyData();
  const b = await fetchData();
  const result = add(a, b);
}

// 2
{
  const a = fetchHeavyData();
  const b = fetchData();

  const promiseResultArr = await Promise.all([a, b]);

  const result = add(...promiseResultArr);
}

• promise는 선언과 동시에 실행된다
• 1의 경우 서로 무관한 비동기 흐름을 순차적으로 처리한다
• 2의 경우 Promise.all을 사용해 병렬 처리하여 1보다 효율적이다