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!