프로미스 정적 메서드

박경찬·2022년 7월 25일
0

JavaScript

목록 보기
20/26

Promise 는 주로 생성자 함수로 사용되지만 함수도 객체이므로 메서드를 가질수 있다.

Promise.resolve / Promise.reject

resolve 와 reject 메서드는 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용한다.
resolve와 reject 의 역활은 앞서 공부하였으므로 넘어가겠다.

	const resolvePromise = Promise.resolve([1,2,3]);
						   resolvePromise.then(console.log);
	const resolvedPromise = Promise.resolve([1,2,3]);
						   resolvedPromise.then(console.log);
							//[1,2,3]
//위 내용은 아래 내용과 동일하게 동작한다.
	const resolvedPromise = new Promise.resolve( resolve => resolve([1,2,3]));
						   resolvedPromise.then(console.log);
	//여러 객체를 reject 하는 프로미스를 생성	
const rejectPromise = Promise.reject((new Error('Error'));
					  rejectedPromise.catch(console.log());
// 윈내용은 아래내용과 동일하게 동작한다.

const rejectedPromise = new Promise((_,reject) => reject(new Error('Error')));

Promise.all
Promise.all 메서드는 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달 받는다. 그리고 전달받은 모든 프로미스가 fulfilled상태가 되면 모든 처리 결과를 배열에 저장해 새로운 프로미스를 반환한다.

	const requestData1=()=> new Promise(resolve 
                                        => setTimeout(() 				
                                        =>resovle(1),3000));

	const requestData2=()=> new Promise(resolve 
                                        => setTimeout(() 				
                                        =>resovle(1),2000));

	const requestData3=()=> new Promise(resolve 
                                        => setTimeout(() 				
                                        =>resovle(1),1000));

Promise.all([requestData(1),requestData(2),request3()]).
			then(console.log) //[1,2,3] => 3초 소요
			.catch(console.error)

Promisea.all 메서드는 3개의 프로미스 요소를 갖는 배열을 전달받았다. 각 프로미스는 다음과 같이 동작한다.

첫 번째 프로미스는 3초후에 1을 resolve한다
두 번째 프로미스는 2초후에 1을 resolve한다
세 번째 프로미스는 1초후에 1을 resolve한다

Promise.all 메서드는 인수로 전달받은 배열의 모든 프로미스가 모두 fulfilled 상태가 되면 종료한다. 이때 resolve된 처리 결과 를 모두 배열에 저장하고 반환한다. 첫번째 프로미스가 가장 나중에 fulfilled가 되어도 첫번째 프로미스 결과부터 차례대로 배열에 저장해 그배열을 resolve하는 새로운 프로미스를 반환한다.

Promise.all 메서드는 인수로 전달받은 배열의 프로미스가 하나라도 reject 상태가 되면 나머지 프로미스가 fulfilled 상태가 되는것을 기다리지 않고 즉시 종료한다.

const promiseGet = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    xhr.onload = () => {
      if (xhr.status === 200) {
        // 성공적으로 응답을 전달바등면 ressolve 함수를 호출한다
        resolve(JSON.parse(xhr.response));
      } else {
        // 에러 처리를 위해 reject 함수를 호출한다
        reject(new Error(xhr.status));
      }
    };
  });
};

const gitGubId = ["1", "2", "3"];

Promise.all(
  gitGubId.map((id) => promiseGet(`https://api.github.com/users/${id}`))
)
  .then((users) => users.map((user) => user.name))
  .then(console.log)
  .catch(console.error);

위내용은 깃허브 아이디로 깃허브 사용자 이름을 취득하느 3개의 비동기 처리르 모두 병렬로 처리하는 내용이다.

api 에서 사용하는 유저 내용은https://api.github.com/users 여기서 확인가능하다

promise.all 메서드는 promiseGet 함수가 반환한 3개의 프로미스로 이루어진 배열을 인수로 전달받고 이 프로미스들이 fulfilled 상태가 되면 처리 결과를 배열에 저장해 새로운 프로미스를 반환한다.

0개의 댓글