자바스크립트 프로미스 async await

프로미스 5가지 정적 메소드

Promise.all([...promises]) : 배열의 각 요소에는 프로미스가 들어가고,
각 프로미스들의 반환값을 배열로 만들어 반환한다. 

ex)
Promise.all([
  new Promise((resolve,reject) => resolve(1),
  new Promise((resolve,reject) => resolve(2)),
  new Promise((resolve,reject) => resolve(3)),
 ]).then((responses) ) // responses : [1,2,3] 인덱스 순서대로 배열 구성

프로미스 중 하나라도 실패하면 모든 응답이 거절된다.
  
Promise.allSettled([]) : 요청에 실패한 프로미스가 있더라도 응답을 다 받고
싶을 때 사용
요청에 성공한 경우 : response : {status : 'fullfilled', value: 응답 데이터}
요청에 실패한 경우 : response : {status: 'rejected', reason: error 원인}

Promise.race([]) : Promise.all과 비슷하지만 프로미스들 중 가장 빨리 처리된
결과만 반환한다.

async await

async : 함수앞에 async가 붙으면 그 함수의 반환값은 프로미스가 된다.
따라서 그 함수는 프로미스 핸들러 then, catch, finally를 사용할 수 있다.
await : async가 있는 함수 내에서 사용할 수 있으며, 함수안에 응답에 시간이 걸리는
프로미스가 있을 때 await을 앞에 붙여 프로미스를 기다리고 난 후 다음 코드를 실행
하게 할 수 있다.

ex)
async function func() {
  try{
    const fetchData = await fetch('응답url').then(res => res.json())
    
    return fetchData
    
    } catch(err) {
    	console.log(err)
    }
}

func().then(...)
            
클래스, 객체 메소드에도 사용가능하며, Promise.all문 앞에도 await 사용가능하다.
                       

참고

https://ko.javascript.info/

좋은 웹페이지 즐겨찾기