Promise

promise는 자바스크립트 비동기 처리에 사용되는 객체입니다.

Promise method

1. Promise.all
2. Promise.race: race함수는 인자로 주어진 array와 같은 iterable객체의 프로미스 중 가장 먼저 완료되는 것의 결과값으로 그대로 이행하거나 거부하는 함수입니다.
3. Promise.reject(): 주어진 이유로 거부하는 Promise객체를 반환합니다.
4. Promise.resolve(): 주어진 값으로 이행하는 Promise.then객체를 반환합니다. 그 값이 프로미스인 경우, 해당 프로미스가 반환됩니다.

Promise prototype method

1. catch(): reject()를 호출 했을 때 실패 이유를 catch()로 받습니다.
2. then(): resolve()를 성공적으로 호출 했을 때 then()을 이용해 결과 값을 받을 수 있습니다.
3. finally(): finally()는 수신 거부 여부에 관계없이 무조건 실행 됩니다.

Promise의 3가지 상태(states)

여기서 상태란 프로미스의 처리 과정을 의미합니다. new Promise()로 프로미스를 생성하고 종료될 때 까지 3가지 상태를 갖습니다.

• Pendin(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

new Promise()메서드를 호출하면 대기 상태가 됩니다.

new Promise();

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject입니다.

new Promise((resolve,reject) => {
});

FulFilled(이행)

콜백 함수의 인자 resolve를 실행하면 이행 상태가 됩니다.

new Promise((resolve,reject) => {
  resolve();
})

resolve를 성공적으로 호출하게 되면 then()을 이용하여 처리 결과 값을 받을 수 있습니다.

function success() {
  return new Promise((resolve,rejcet) {
    let data = 100;
    resolve(data);
	});
}
// result에 resolve()의 결과 값인 data가 들어가게 됩니다.
success().then(result => console.log(result)); // 100

Rejected(실패)

이행처럼 resolve대신 reject()를 호출하게 되면 실패상태가 됩니다.

new Promise((resolve, reject) {
    reject();
});

실패상태가 실행되게 되면 then이 아니라 catch()를 통해 실패한이유(실패 처리의 결과 값을) 받을 수 있습니다.

function fail() {
  return new Promise((resolve,rejcet) {
    reject(new Error('error'));
	});
}
// reject()의 결과 값 Error를 err에 받음
fail().then().catch(err => {
  console.log(err)
})

Promise chaining

promise chaining은 여러개의 promise를 연결하여 사용할 수 있습니다.

new Promise((resolve, reject) {
   setTimeout(() => {
  		resolve(1);
	}, 2000);
})
.then(result => {
  console.log(result) // 1
  return result + 10;
})
.then(result => {
  console.log(result) // 11
  return result + 10;
})
.then(result => {
  console.log(result) // 21
})

resolve()를 호출하게 되면 첫번째 then()이 실행되고, 반환값은 그 다음 then으로 또 그 다음 then으로 계속해서 넘겨주게되는 체이닝 형태가 됩니다.

Promise.all()

만약에 여러가지 작업을 동시에 병렬로 처리하고 싶다면 Promise.all()을 사용할 수 있다. 내가 처리하고자 하는 프로미스들을 배열로 담아 Promise.all에 인자로 전달하면 배열에 있는 모든 프로미스들이 거의 동시에 실행된다.

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(alert)

시간상으로 봤을 때는 1초후 3이, 2초후, 2, 3초후 1이 출력되는게 맞지만 promise.all을 쓰면
위 코드의 Promise.all은 3초 후에 처리되고, 반환되는 프로미스는 결과는 배열 [1,2,3]이 됩니다.

만약 Promise.all에 전달되는 프로미스 중 하나라도 거부되면, Promise.all이 반환되는 프로미스는 에러와 함께 전체가 거부 되고 catch가 실행됩니다.