Promise 프로미스 사용하기

Promise 

프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체, 콜백을 첨부하는 방식의 객체이다.

 

프로미스 장점

• 콜백은 자바스크립트 Event Loop이 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않는다.
• 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 콜백의 경우에도 위와 같다.
• then() 을 여러번 사용하여 여러개의 콜백을 추가 할 수 있으며 각각의 콜백은 주어진 순서대로 하나 하나 실행되게 된다.
• chaining

Promise.then()

then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다.

하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다.

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});

promise1.then((value) => {
  console.log(value);
  // expected output: "Success!"
});

 

Chaining

프로미스 체이닝

 

보통 하나나 두 개 이상의 비동기 작업을 순차적으로 실행해야 하는 상황을 흔히 보게 된다. 순차적으로 각각의 작업이 이전 단계 비동기 작업이 성공하고 나서 그 결과값을 이용하여 다음 비동기 작업을 실행해야 하는 경우를 의미한다.  이러한 상황에서 promise chain을 이용하여 해결하기도 한다.

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

then() 함수는 새로운 promise를 반환한다.

처음에 만들었던 promise와는 다른 새로운 promise이다.

const promise2 = doSomething().then(successCallback, failureCallback);

 

프로미스 체이닝으로 콜백지옥 해결하기

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

 콜백 함수들을 반환된 promise에 promise chain을 형성하도록 추가할 수 있다:

 

then 에 넘겨지는 인자는 선택적(optional)이다.

catch(failureCallback) 는 then(null, failureCallback) 의 축약이다. 

doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
  console.log(`Got the final result: ${finalResult}`);
})
.catch(failureCallback);

 

async/await 비동기 처리 

함수 정의 앞에 async 키워드를 사용하면 함수 내에 await를 사용할 수 있다.

프라미스를 await할 때 함수는 프라미스가 결정될 때까지 방해하지 않는 방식으로 일시 중지된다. 프라미스가 이행되면 값을 돌려받는다.

프라미스가 거부되면 거부된 값이 반환(throw)된다.

async function foo() {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log(`Got the final result: ${finalResult}`);
  } catch(error) {
    failureCallback(error);
  }
}

 

 

 

 

Using promises

 

비동기 함수 - 프라미스에 친숙해질 수 있게 해주는 함수  |  Web  |  Google Developers