비동기적 실행과 Promise

동기적 (Synchronous)

작업을 요청이 끝날 때 까지 기다렸다가 완료가 되서야 다음 작업을 실행하는 방식.

익숙한 방식이지만 웹에서는 비효율적이다.

 

비동기적 (Asynchronous)

그래서 앞선 작업이 끝나건 말건 다음 작업을 실행해서 동시에 여러 요청을 처리할 수 있다 (병렬처리인가)

 

그래서 순차적으로 실행되길 원한다면 콜백지옥을 구현해야 했지만 ES6부터 Promise가 도입되었다.

const Promise_async_await = () => {
  function increase(number) {
    // 성공 : resolve, 실패 : reject
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const result = number + 10;
        if (result > 50) {
          const e = new Error('NumberTooBig');
          return reject(e);
        }
        resolve(result);
      }, 1000);
    });
    
    //promise 객체를 반환해줘야한다.
    return promise;
  }
  
  // functio앞에 async를 붙인다.
  async function asdf() {
    try {
      let result = await increase(0);
      console.log(result);
      result = await increase(result);
      console.log(result);
      result = await increase(result);
      console.log(result);
      result = await increase(result);
      console.log(result);
      result = await increase(result);
      console.log(result);
      result = await increase(result);
      console.log(result);
      result = await increase(result);
      console.log(result);
    } catch (e) {
      console.log(e);
    }
    // 이러면 마치 순차실행을 구현한 것 처럼 보인다.
  }

이 코드를 F12를 눌러서 console창에 복붙해서 실행해보면 10 20 30 40이 순서대로 나오다가 50이 되는순간 미리 설정한 에러코드가 reject를 통해 반환되어 나온다.