당신이 알아야 할 4가지 약속 방법

안녕하세요👋 여러분,

이 기사에서는 가장 많이 사용되는 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 => 🐈
    */
    


    재미있으셨다면 좋아요와 공유 부탁드립니다!🙂

    좋은 웹페이지 즐겨찾기