당신이 알아야 할 4가지 약속 방법
25814 단어 codenewbiewebdevjavascriptnode
이 기사에서는 가장 많이 사용되는 4가지 Promise 메서드를 살펴보겠습니다.
1. Promise.all:
Promise.all 메소드는 Promise의 배열을 받아들이고 모든 Promise가 해결되면 해결되는 새로운 Promise를 반환하고 Promise 중 하나가 거부되면 거부합니다.
// Example 1:
const dog = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐶'), 1000)
})
const cat = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐈'), 2000)
})
Promise.all([dog, cat]).then((values) => {
// Order of values will be in the same order
// in which promises are present in the array
console.log(values) // ['🐶', '🐈']
})
// Example 2:
const bear = new Promise((resolve, reject) => {
setTimeout(() => reject('🐻'), 1000)
})
const panda = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐼'), 2000)
})
Promise.all([bear, panda])
.then((values) => {
console.log(values)
})
.catch((error) => {
console.error(error) // 🐻
})
// Practical Usage:
// This would be useful in the case where
// you want to fetch data from multiple resources
// and then consolidate them to form a response
// before sending it back to the client.
Promise.all([
fetch('/endpoint0'),
fetch('/endpoint1'),
fetch('/endpoint2'),
]).then(response => console.log(response))
.catch(error => console.log(error))
2. Promise.race:
Promise.race 메서드는 Promise 배열을 수락하고 Promise 중 하나라도 해결되거나 거부되면 해결하거나 거부하는 새 Promise를 반환합니다.
// Example 1:
const dog = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐶'), 1000)
})
const cat = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐈'), 2000)
})
Promise.race([dog, cat]).then((value) => {
// value will be the resolved value of
// first promise which resolved.
console.log(value) // '🐶'
})
// Example 2:
const bear = new Promise((resolve, reject) => {
setTimeout(() => reject('🐻'), 1000)
})
const panda = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐼'), 2000)
})
Promise.race([bear, panda])
.then((value) => {
console.log(value)
})
.catch((error) => {
// value will be the rejected value of
// first promise which was rejected.
console.error(error) // 🐻
})
// Practical Usage:
// Here Promise will throw 'request timeout'
// if the api call takes more than 30 seconds
Promise.race([
fetch('/endpoint'),
new Promise(function (resolve, reject) {
setTimeout(() =>
reject(new Error('request timeout')), 30000)
})
]).then(response => console.log(response))
.catch(error => console.log(error))
3. Promise.any:
Promise.any 메소드는 Promise 배열을 수락하고 Promise 중 하나가 해결되거나 모든 Promise가 거부되면 해결되는 새 Promise를 반환합니다.
참고: 이 글을 쓰는 시점에서는 아직 실험 단계에 있으며 모든 브라우저와 플랫폼에서 아직 지원하지 않습니다.
폴리필: Promise.any
// Example 1:
const dog = new Promise((resolve, reject) => {
setTimeout(() => reject('🐶'), 1000)
})
const cat = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐈'), 2000)
})
Promise.any([dog, cat]).then((value) => {
// value will be the resolved value of
// first promise which resolved.
console.log(value) // '🐈'
})
// Example 2:
const bear = new Promise((resolve, reject) => {
setTimeout(() => reject('🐻'), 1000)
})
const panda = new Promise((resolve, reject) => {
setTimeout(() => reject('🐼'), 2000)
})
Promise.any([bear, panda])
.then((value) => {
console.log(value)
})
.catch((error) => {
// Array of rejected values
console.error(error) // ['🐻','🐼']
})
// Practical Usage:
// This can be used if we have multiple async calls
// and we are only interested in the first successful one.
Promise.any([
fetch('/endpoint'),
fetch('/alternateEndpoint'),
})
]).then(response => console.log(response))
.catch(error => console.log(error))
4. Promise.allSettled:
Promise.allSettled 메소드는 프라미스의 배열을 받아들이고 주어진 모든 프라미스가 이행되거나 거부된 후 해결되는 새로운 프라미스를 반환하며, 상태, 값 필드가 있는 객체 배열을 사용합니다. 이유.
// Example 1:
const dog = new Promise((resolve, reject) => {
setTimeout(() => resolve('🐶'), 1000)
})
const cat = new Promise((resolve, reject) => {
setTimeout(() => reject('🐈'), 2000)
})
Promise.allSettled([dog, cat]).then((values) => {
console.log(values);
// [{ status: 'fulfilled', value: '🐶' },
// { status: 'rejected', // reason: '🐈' }]
});
// Practical Usage:
// I have mostly used this for batch processing where
// we identify the failed ones and retry separately.
Promise.allSettled([
fetch('/endpoint0'),
fetch('/endpoint1'),
})
]).then(response => console.log(response))
보너스 팁:
Promise가 해결되거나 거부된 경우 Promise 생성자 콜백이 단락되지 않는다는 것을 알고 계셨습니까?
const dog = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('🐶');
console.log('I am still executing!!');
}, 1000);
})
const cat = new Promise((resolve, reject) => {
setTimeout(() => {
reject('🐈');
console.log('Even I am!!');
}, 2000)
})
Promise.all([dog, cat]).then((values) => {
console.log(values)
}).catch((error) => {
console.log('error =>',error);
})
/*
Console Output:
I am still executing!!
Even I am!!
error => 🐈
*/
재미있으셨다면 좋아요와 공유 부탁드립니다!🙂
Reference
이 문제에 관하여(당신이 알아야 할 4가지 약속 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kannndev/4-promise-methods-you-need-to-know-5aa5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)