JS) Promise, async/await

Promise

Callback Hell로 인한 복잡도 증가와 예외처리의 어려움을 해결하기 위해서 만들어진 비동기 작업 예약어

Promise는 비동기 작업의 단위이다. Promise로 관리할 비동기 작업을 만들 때에는, Promise 에서 요구하는 방법대로 만들어야 한다.

 

예시>>

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) resolve();
    else reject();
  });
}

const promise1 = startAsync(25);
promise1
  .then(() => {
    console.log("1 then!");
  })
  .catch(() => {
    console.log("1 catch!");
  });

const promise2 = startAsync(15);
promise2
  .then(() => {
    console.log("2 then!");
  })
  .catch(() => {
    console.log("2 catch!");
  });

결과 >>

 

- new Promise로 새로운 Promise 객체를 생성한다. 생성자는 함수와 동일하게 동작하므로, 괄호를 써서 함수를 호출하는 것과 같다. Promise의 특징으로 new Promise(...)하는 순간 할당된 비동기 작업은 바로 시작된다. 

 

- resolve(value) : 일이 성공적으로 마친 경우 - 프로미스를 실행한 곳의 then으로 들어간다.

- reject(error) : 일이 성공적이지 않은 경우(에러 발생 시) - 프로미스를 실행한곳의 catch로 들어간다. 

 

- then 메소드는 해당 Promise 가 성공했을 때 동작을 지정한다.

- catch 메소드는 해당 Promise 가 실패했을 때이 동작을 지정한다.

 

- Promise1은 성공하고 promise2는 실패하도록 만들어서, Promise1에서는 catch로 등록했던 함수는 실행되지 않고, then으로 지정된 동작이 수행된다. 반면에 Promise2는 then동작은 수행하지 않고 catch 동작만 수행한다.

 

Promise의 동작원리

Promise는 세 가지 상태를 지닌다. 

- Pending : Pomise를 수행 중인 상태

- Fulfilled : Promise가 resolve된 상태

- Rejected : Rromise가 지켜지지 못한 상태. Reject 된 상태

 

async/await

async/await는 프로미스 기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 하기 위해서 비동기 코드를 동기식으로 작성 가능하게 해준다. async 키워드는 함수를 선언할 때 붙인다. 

 async function 함수명() {
 	await 비동기처리 메서드명();
    }

 

async

- 함수 앞에 붙어 Promise를 반환한다.

- 프로미스가 아닌 값을 반환해도 프로미스로 감싸서 반환한다.

 

await

- 프로미스 앞에 붙여 프로미스가 다 처리될 때까지 기다리게하는 역할을 하며 결과는 그 후에 반환한다.

-  async함수 내에서만 쓸 수 있다.

 

 

예시 >>

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

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();

결과 >>

 

 

 

출처 : https://springfall.cc/post/7

[Javascript] 비동기, Promise, async, await 확실하게 이해하기