자바스크립트 프로미스 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 사용가능하다.
참고
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 : 함수앞에 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 사용가능하다.
참고
Author And Source
이 문제에 관하여(자바스크립트 프로미스 async await), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gytlr01/자바스크립트-프로미스-async-await저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)