✍️ Promise, async, await

1-blue·2021년 12월 2일
0

JavaScript

목록 보기
14/15

1. Promise

1.1 Promise 사용법 - 1 ( 프로미스 객체 생성 )

  • new Promise(): 프로미스 생성자 함수 호출

  • executer(): 프로미스 생성자 함수에서 인자로 받는 함수 ( 화살표함수가 executer임 )

  • 프로미스 생성자 함수에서 인수로 넣어주는 함수
    1. resolve(): 내부 비동기 작업이 성공 시 호출하는 함수
    2. reject(): 내부 비동기 작업이 실패 시 호출하는 함수

executor는 생성 즉시 실행된다.
즉, 내부의 비동기 요청을 즉시 실행되고 성공 or 실패에 대한 결괏값만 미리 준비를 해놓고 이후에 then() or catch()에 의해서 결괏값을 받아서 처리한다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  // fetch
  
  // 성공
  resolve("작업값");
  
  // 실패
  reject(new Error("실패 이유"));
})

1.2 Promise 사용법 - 2 ( 프로미스 실행 )

  • then(callback): 프로미스가 resolve()를 실행했을 경우 실행된다.
  • catch(callback): 프로미스가 reject()를 실행했을 경우 실행된다.
// 프로미스 크리에어터 함수
const promiseAsync = (age) => {
  return new Promise((resolve, reject) => {
    age >= 20 ? resolve(`${age}살 이네요!`) : reject(new Error("미성년자시네요..."))
  });
}

// "22살 이네요!"
const promiseSuccess = promiseAsync(22);
promiseSuccess
  .then(v => console.log(v))
  .catch(error => console.error(error));

// "미성년자시네요..."
const promiseFailure = promiseAsync(22);
promiseFailure
  .then(v => console.log(v))
  .catch(error => console.error(error));

1.3 Promise의 상태

프로미스는 3가지의 상태 중 하나를 가집니다.

  • pending: 대기 상태로 executor()에서 resolve()reject()를 호출하지 않은 상태
  • fulfilled: 이행 상태로 executor()에서 resolve()를 호출한 상태
  • rejected: 거부 상태로 executor()에서 reject()를 호출한 상태

2. async와 await

2.1 async

asynchronous의 줄임말로 비동기를 의미함
함수 앞에 붙여줄 수 있으며, 함수 앞에 async를 붙일 경우 반환값이 자동적으로 new Promise()가 된다.

2.2 await

async함수 내부에서만 사용할 수 있고, promise객체 앞에 붙일 수 있다.
promise객체가 결괏값을 반환할 때까지 기다렸다가 실행한다.
여기서 결괏값을 반환할 때까지 기다린다는 의미는 fulfilled상태나 rejected상태가 될 때까지 기다린다는 의미입니다.

2.3 예시

// 프로미스 크리에어터 함수
const promiseAsync = async (age) => {
  return age >= 20 ? `${age}살 이네요!` : new Error("미성년자시네요...");
}

// 즉시 실행 함수
(async () => {
  try {
    const promiseSuccess = promiseAsync(22);
    const successResult = await promiseSuccess;
    console.log(successResult);	// 22살 이네요!
  
    const promiseFailure = promiseAsync(18);
    const failureResult = await promiseFailure;
    console.log(failureResult);	// 미성년자시네요...
  } catch (error) {
    console.error(error);
  }
})();

3. Promise API

3.1 Promise.resolve()

성공한 프로미스를 즉시 반환함

3.2 Promise.reject()

실패한 프로미스를 즉시 반환함

3.3 Promise.all()

프로미스들을 배열로 받아서 프로미드들중에 하나라도 reject되면 즉시 다른 프로미스 종료하고 reject

// 아래처럼 resolve()에서 반환한 값으로만 배열을 만들어서 반환해줌
[1, 2, 3]

3.4 Promise.allSettled()

Promise.all()과 같은 역할을 하면서 중간에 reject돼도 모든 결과를 받아서 실행함

// 아래와 같은 형식으로 반환함
[
  { status: 'fulfilled', value: 1 },
  {
    status: 'rejected',
    reason: Error: 에러 생성
  }
]

3.5 Promise.race()

가장 먼저 처리되는 결괏값만 반환합니다.
성공/실패 여부에 상관없이 먼저 처리되는 값을 반환한다.

3.6 Promise API 예시

// "success"
Promise.resolve("success")
  .then(console.log)
  .catch(console.error);

// Error: 에러!!
Promise.reject("에러!!")
  .then(console.log)
  .catch(console.error);

const promiseTimerCreator = (state, value, time) => new Promise((resolve, reject) => {
  setTimeout(() => {
    state ? resolve(value) : reject(new Error(`Error!!! ${value}`));
  }, time);
})

// 2초뒤 실행 => ["1초", "2초"]
// 여기에 만약 reject된 값이 있다면 즉시 catch부분 실행
Promise
  .all([promiseTimerCreator(true, "1초", 1000), promiseTimerCreator(true, "2초", 2000)])
  .then(console.log)
  .catch(console.error);

// 2초뒤 실행 => [{ status:"fulfulled", value: "1초" }, { status:"rejected", reason: Error: Error!!! 2초 }]
Promise
  .allSettled([promiseTimerCreator(false, "1초", 1000), promiseTimerCreator(true, "2초", 2000)])
  .then(console.log)
  .catch(console.error);

// 1초뒤 실행 => 1초
// 실행결과가 resolve든 reject든 상관없이 먼저 처리된 결과를 반환함
Promise
  .race([promiseTimerCreator(true, "1초", 1000), promiseTimerCreator(true, "2초", 2000)])
  .then(console.log)
  .catch(console.error);

4. 의문

  • await은 왜 async함수 내부에서만 사용이 가능할까?

참고한 사이트

0개의 댓글