Promise.all 메소드와 API 호출

Hyemimi·2022년 7월 26일

js

목록 보기

17/18

Promise.all : promise의 정적메소드 중 하나.

💫`Promise.all` 기본 구조💫

let promise = Promise.all([/*처리할 프로미스들*/]);

배열 안 프로미스가 모두 처리되면, 배열 안 프라미스의 결괏값을 담은 배열이 새로운 프라미스의 result가 된다.

❓`Promise.all`은 언제 사용할 수 있을까❓

각 프로미스의 처리 순서를 보장하되, 결과를 하나의 배열로 저장하고 싶을 때 사용된다
예를 들어,

Promise.all([
  new Promise(resolve => setTimeout(()=> resolve(1),3000)), 
  // 3초 뒤 1
  new Promise(resolve => setTimeout(()=> resolve(2),2000)), 
  // 2초 뒤 2
  new Promise(resolve => setTimeout(()=> resolve(3),1000))  
  // 1초 뒤 3
]).then((result)=>console.log(result)); 
// [1, 2, 3]

위의 경우 처리순서는 3의 경우가 가장 빠르지만(1초)
배열의 마지막에 들어가있다.
반면 1은 가장 늦게 이행되더라도 배열의 첫 번째 요소에 위치한다.
즉, Promise.all은 모든 작업이 이행될 때까지 기다린다.

💫프로미스들 중 하나라도 에러가 발생한다면, 다른 프로미스는 무시💫


Promise.all([
  new Promise((resolve, reject) 
  =>setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) 
  => setTimeout(() =>reject(new Error("에러 발생!")), 2000)),
  new Promise((resolve, reject) 
  =>setTimeout(() => resolve(3), 3000))
]).catch(alert); // Error: 에러 발생!

2초 뒤 reject가 호출되며 바로 .catch로 넘어감

💫프로미스 대신 값을 바로 전달할 수도 있다💫

Promise.all([
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000)
  }),
  2,
  3
]).then((result)=>console.log(result));
// [1,2,3]

2, 3은 그대로 배열에 저장된 것을 확인할 수 있다!

Promise.all 이용해서 dummy API 호출해보기 (1)

let urls = [
  'https://jsonplaceholder.typicode.com/comments',
'https://jsonplaceholder.typicode.com/users'
];

// fetch를 사용해 url을 프라미스로 매핑합니다.
let requests = urls.map(url => fetch(url));
console.log(requests) // [Promise, Promise]

// Promise.all은 모든 작업이 이행될 때까지 기다립니다.
// JSON 형태의 응답 메시지는 파싱 되어 배열 'users'에 저장됩니다.
Promise.all(requests)
.then(responses =>Promise.all(responses.map(r => r.json())))
  .then(result => 
        result.map((users)=>console.log(users)));