promise sequence 처리 패턴 - 1

INTRO

promise 패턴과 array method를 활용한 비동기 시퀀스 처리에 대해 예제와 함께 정리해보았다.

아직도 복잡하고 좀 익숙치 않다. 특히 맨마지막 4.개선은 아직 좀 더 익숙해져야 하겠다.

array method에 대해 정리가 필요하다면 여기

 

참고 : https://developers.google.com/web/fundamentals/primers/promises?hl=ko

참고하여 예제를 정리했다. 예제 케이스가 참 좋은 것 같은데 설명 번역이 좀 엉성하긴하다.

 

여러개의 비동기 처리 콜은 하되, 결과 값은 순차적으로 저장 하도록 하는 예제를 살펴본다.

4.개선에서는 이전 비동기 콜 실행이 끝나는 것을 기다리는 것이 아니라 콜은 모두 동시에 하되, 결과는 순서대로 표시하도록 효율적인 비동기 처리 예제를 보여준다.

 

일단 promise api 한번 정리 해보자!

메서드 요약 ( all, race 주목 )

Promise.resolve(promise);	프라미스를 반환합니다(promise.constructor == Promise인 경우에만).
Promise.resolve(thenable);	thenable에서 새 프라미스를 만듭니다. thenable은 `then()` 메서드가 있는 한 프라미스와 유사합니다.
Promise.resolve(obj);	이 상황에서 obj를 처리하는 프라미스를 만듭니다.
Promise.reject(obj);	obj를 거부하는 프라미스를 만듭니다. 일관성 및 디버깅(예: 스택 추적)을 위해 obj는 instanceof Error여야 합니다.
Promise.all(array);	배열의 모든 항목이 처리될 때 처리하고 항목이 하나라도 거부되면 거부하는 프라미스를 만듭니다. 각 배열 항목이 Promise.resolve에 전달되므로 해당 배열은 프라미스 유사 객체와 다른 객체의 혼합일 수 있습니다. 처리 값은 배열 값의 (순서대로) 배열입니다. 거부 값은 첫 번째 거부 값입니다.
Promise.race(array);	어떤 항목이 처리되자마자 혹은 거부되자마자 프라미스를 발생 순서에 상관없이 리턴합니다.

 

all, race의 차이를 다시 정리하자면,

1) Promise.all(array)

   - 모두 fulfiled : promise 배열 순서대로 결과값 배열을 리턴

   - 하나라도 rejected :  reject된 promise와 reject 이유를 리턴

 

2) Promise.race(array) - fulfiled , rejected 상관없이 처음으로 종료된 promise를 리턴

 

 

이제 예제를 보자!

 

 

============================================================================

 

참고 : https://poiemaweb.com/es6-promise

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

https://victorydntmd.tistory.com/49

[JS] Promise로 콜백지옥을 해결해보자