Portfolio

비동기 ⇒ Promise, async, await

동기 vs 비동기

동기 ⇒ 동시에 여러 작업을 수행할 수 없음, 흐름을 예측하기 쉽다. 먼저 수행되고 나중에 수행되는 것들이 명확하다.

비동기 ⇒ 동시에 여러 작업을 수행할 수 있음, 흐름을 예측하기 어려움

Promise

비동기 작업의 단위


const promise1 = new Promise((resolve, reject) => {
  resolve();
});
promise1
  .then(() => {
    console.log("then!");
  })
  .catch(() => {
    console.log("catch!");
  });

resolve와 reject는 또다른 함수로서 resolve는 비동기 작업이 성공 했을 경우, reject는 비동기 작업이 실패 했을 경우

then 메소드는 해당 Promise 가 성공했을 때의 동작(인자로 함수)

catch 메소드는 실패했을 경우(인자로 함수)


function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) resolve(`${age} success`);    
    else reject(new Error(`${age} is not over 20`));
  });
}

setTimeout(() => {
  const promise1 = startAsync(25);
  promise1
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });
  const promise2 = startAsync(15);
  promise2
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });
}, 1000);

25 success
Error: 15 is not over 20
    at /home/taehoon/Desktop/playground-nodejs/index.js:4:17
    at new Promise (<anonymous>)
    at startAsync (/home/taehoon/Desktop/playground-nodejs/index.js:2:10)
    at Timeout._onTimeout (/home/taehoon/Desktop/playground-nodejs/index.js:17:20)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)

async

Promise 와 밀접한 연관을 가지고 있음

async 의 return 값은 Promise


// 기존
// function startAsync(age) {
//  return new Promise((resolve, reject) => {
//    if (age > 20) resolve(`${age} success`);    
//   else reject(new Error("Something went wrong"));
//  });
// }

async function startAsync(age) {
  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

setTimeout(() => {
  const promise1 = startAsync(25);
  promise1
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });
  const promise2 = startAsync(15);
  promise2
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });
}, 1000);

await ⇒ async 함수 안에서만 사용 가능, Promise가 완료될 때 까지 기다림

await [[Promist 객체]]


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

async function startAsync(age) {
  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

async function startAsyncJobs() {
  await setTimeoutPromise(1000);
  const promise1 = startAsync(25);
  try {
    const value = await promise1;
    console.log(value);
  } catch (e) {
    console.error(e);
  }
  const promise2 = startAsync(15);
  try {
    const value = await promise2;
    console.log(value);
  } catch (e) {
    console.error(e);
  }
}

startAsyncJobs();

비동기의 특징

실제 작업과 그 작업의 후속조치를 따로 분리(then, catch)

async, await를 통해 하나의 흐름속에서 코딩 가능

실제 작업이 끝난 다음 후속 조치를 하는 것이 아니라 실제 작업이 끝나길 기다린 다음 다음 코드를 수행 ⇒ 동기 코드 처럼 사용할 수 있게 함

비동기 ⇒ Promise, Async, await