Promise API

let promise = Promise.all([...promises...]);

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((val)=>console.log(val)); 

여러개의 promise를 묶어서 처리해야할때 사용하며 resolve값들을 하나의 배열로 반환한다.
반환배열 원소들값은 완료되는 시점이 아닌 promise 배열순서를 따른다.
여러개중 하나라도 reject되면 reject핸들러가 호출된다.

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/Violet-Bora-Lee1',
  'https://api.github.com/users/jeresig'
];

let arr = urls.map(url=>fetch(url));
Promise.all(arr)
.then(reponses =>{
  let userArr = reponses.map((reponse)=>{
    if(!reponse.ok){
      throw new Error("respon error");      
    }
    return reponse.json();
  });
  return Promise.all(userArr);
})
.then((users)=>{
  users.map((user)=>{
    console.log(user.name);
  })
})
.catch(console.log)

fetch할 url들을 하나의 묶음으로 처리하려면 Promise.all로 처리하려면 배열순회하여 promise객체들을 하나의 배열로 만든다.

Promise.all()는 response객체들의 배열이 반환되고 reponse.ok를 검사하여 하나라도 연결이 안되면 에러를 발생시킨다.

reponse.json()결과는 promise객체들 배열이므로 다시 Promise.all로 체이닝하여 user정보를 얻는다.

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/Violet-Bora-Lee',
  'https://api.github.com/users/jeresig'
];

let arr = urls.map(url=>fetch(url));
Promise.all(arr)
.then(reponses =>{

  let userNameArr=[] as string[];
  reponses.map((response)=>{
    response.json().then((user)=>{
      userNameArr.push(user.name);
    });
  });

  console.log(userNameArr);

})
.catch(console.log)

Promise.all()로 response배열을 비동기로 반환받고 배열순회하면서 response.json().then()으로 비동기작업결과를 userNameArr배열에 추가한다.

배열순회내부에서 비동기작업이 수행되면 작업완료시 결과흘 배열에 넣는다. 배열을 참조하고있으니 넣을 수 있지.

배열순회는 동기식코드이므로 console.log(userNameArr);는 비동기작업이 수행되기전에 빈배열을 출력해야 하는데 비동기작업이 완료된 결과를 보여준다.???????

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/Violet-Bora-Lee',
  'https://api.github.com/users/jeresig'
];

let promiseArr = urls.map(url=>fetch(url));

let arr = [];
promiseArr.map((promise)=>{
  promise.then((response)=>{
    response.json().then((user)=>{
      arr.push(user.name);
    });
  }).catch(console.log)

});
console.log(arr);

위코드는 체이닝이 아닌 비동기내부에서 다른 비동기작업이 수행되는 것이다.

Promise.all([new Promise(resolve=>resolve(1)),2,3])
.then(console.log)

promise객체뿐만아니라 모든값의 배열을 처리한다.

Promise.allSettled

promise객체배열을 처리하는데 모든 객체들이 settlled될때까지 기다리고 결과를 반환한다.

최근에 추가된 메스드로 호환성문제가 있다.

Promise.race

Promise.race는 Promise.all과 비슷하지만 가장 먼저 처리되는 프라미스의 결과(혹은 에러)를 반환한다.