Promise. The role of any, how to realize a promise any

Posted by dickie_doodle on Tue, 08 Feb 2022 22:04:00 +0100

introduction

This paper introduces promise from five aspects any :

Promise. The role of any
Promise.any application scenario
Promise.any vs Promise.all
Promise.any vs Promise.race
Handwritten promise Any implementation

The following text begins 👇

Promise.any

Promise.any() is a new feature in ES2021. It receives a promise iteratable object (such as an array),

As long as one of the promises is successful, the successful promise will be returned
If none of the promises in the iteratable object succeeds (that is, all promises fail / reject), a failed promise and AggregateError Type, which is Error A subclass of that is used to group single errors together

const promises = [
  Promise.reject('ERROR A'),
  Promise.reject('ERROR B'),
  Promise.resolve('result'),
]

Promise.any(promises).then((value) => {
  console.log('value: ', value)
}).catch((err) => {
  console.log('err: ', err)
})

// value:  result

If all incoming {promises} fail:

const promises = [
  Promise.reject('ERROR A'),
  Promise.reject('ERROR B'),
  Promise.reject('ERROR C'),
]

Promise.any(promises).then((value) => {
  console.log('value: ', value)
}).catch((err) => {
  console.log('err: ', err)
  console.log(err.message)
  console.log(err.name)
  console.log(err.errors)
})

// err:  AggregateError: All promises were rejected
// All promises were rejected
// AggregateError
// ["ERROR A", "ERROR B", "ERROR C"]

Promise.any application scenario

Retrieve resources from the fastest server

Users from all over the world visit the website. If you have multiple servers, try to use the server with the fastest response speed. In this case, promise. Com can be used The any () method receives a response from the fastest server

function getUser(endpoint) {
  return fetch(`https://superfire.${endpoint}.com/users`)
    .then(response => response.json());
}

const promises = [getUser("jp"), getUser("uk"), getUser("us"), getUser("au"), getUser("in")]

Promise.any(promises).then(value => {
  console.log(value)
}).catch(err => {
  console.log(err);
})

Display the first loaded picture (from MDN)

In this example, we have a function to get an image and return a blob. We use promise Any () to get some pictures and display the first valid picture (i.e. the promise of the first resolved)

function fetchAndDecode(url) {
  return fetch(url).then(response => {
    if(!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    } else {
      return response.blob();
    }
  })
}

let coffee = fetchAndDecode('coffee.jpg');
let tea = fetchAndDecode('tea.jpg');

Promise.any([coffee, tea]).then(value => {
  let objectURL = URL.createObjectURL(value);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log(e.message);
});

Promise.any vs Promise.all

Promise.any() and promise All() from the returned results, they are opposite to each other:

Promise.all(): any ， promise ， is ， rejected immediately, and ， reject ， is the first error message thrown. All results will be resolved only when all ， promise ， are ， resolve ，
Promise.any(): any "promise" will be "resolved" immediately, and "resolve" is the first correct result. All failure information will be rejected only when all "promise" are "reject"

In addition, they have different priorities:

Promise.all() is interested in all implementations. The opposite situation (at least one rejection) leads to rejection.
Promise.any() is interested in the first implementation. The opposite situation (all rejections) leads to rejection.

Promise.any vs Promise.race

Promise.any() and promise Race() has different concerns:

Promise.any(): focus on whether promise has been solved
Promise.race(): mainly focus on whether promise has been resolved, whether it is resolved or rejected

Handwritten promise Any implementation

Promise.any, as long as one of the incoming promises is fullfilled, resolve it immediately. Otherwise, collect all reject results and return AggregateError

MyPromise.any = function(promises){
  return new Promise((resolve,reject)=>{
    promises = Array.isArray(promises) ? promises : []
    let len = promises.length
    // Used to collect all reject ions 
    let errs = []
    // If an empty array is passed in, AggregateError will be returned directly
    if(len === 0) return reject(new AggregateError('All promises were rejected'))
    promises.forEach((promise)=>{
      promise.then(value=>{
        resolve(value)
      },err=>{
        len--
        errs.push(err)
        if(len === 0){
          reject(new AggregateError(errs))
        }
      })
    })
  })
}

last

This article starts from the "three minute learning front-end". Reply to "communication" and automatically join the front-end three minute advanced group. One programming algorithm interview question (including solutions) every day will help you become a better front-end developer!

Programmer Think