The purpose of the Promise

Promise in JS is basically dealing with callback hell what is callback hell? Callback hell is where we nested asynchronous tasks layer upon layer within asynchronous tasks, resulting in code bloat that promise chain calls solve.

Promise has three states: Fulfill (success) Reject (failure)

How to Create Promises

return new Promise((resolve,reject)=>{... Resolve (result) reject(eror) Reject (eror). Resolve and reject(eror). Then (success,fail)Copy the code

Promise. Prototype. Then use

The then() method returns a Promise (en-us). It needs at most two arguments: a callback to Promise’s success and failure cases.

Const promise1 = new Promise((resolve, reject) => {resolve('Success! '); }); promise1.then((value) => { console.log(value); // expected output: "Success!" });Copy the code

Promise. The use of all

The promise.all () method accepts an iterable of promises. Array, Map, and Set are all ES6 iterable types), and only one Promise instance is returned. The result of the resolve callbacks to all of those entered promises is an Array. The Promise’s resolve callback is executed when all the incoming Promise’s resolve callbacks have ended, or when no promises are left in the input iterable. Its Reject callback execution throws an error as soon as any incoming promise’s Reject callback is executed or an invalid promise is entered, and reject is the first error message thrown.

Example const promise1 = promise.resolve (3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values); }); // expected output: Array [3, 42, "foo"]Copy the code
grammar
Promise.all(iterable);
Copy the code

The return value

  • If the argument passed is oneAn empty iterable, returns oneHas been completed (already resolved)The state of thePromise.
  • If the parameters passed in do not contain any promises, an Asynchronous completion Promise is returned. Note: Google Chrome 58 in this case returns a Promise that the state is already resolved.
  • Otherwise, a pending Promise is returned. This returned promise then becomes asynchronously completed or failed when all promises are completed or when one promise fails. See below for an example of “asynchrony or synchronization for Promise.all”. The return values will be in the order of the promise within the parameters, not determined by the order in which the promise was called.

Promise. The use of the race

The promise.race (iterable) method returns a Promise that is resolved or rejected once a Promise in the iterator is resolved or rejected.

Example promise.race ([promise1, promise2]).then((value) => {console.log(value); // Both resolve, but promise2 is faster }); // expected output: "two"Copy the code

grammar

Promise.race(iterable);
Copy the code

The return value

A pending Promise resolves or rejects as soon as one Promise in a given iteration is resolved or rejected, taking the value of the first Promise as its value, thereby resolving or rejecting it asynchronously (once the stack is empty).

describe

The race function returns a Promise that will be completed in the same way as the first Promise passed. It may be a high degree of completion or rejection, depending on which of the two is the first. If the passed iteration is empty, the returned promise will wait forever. If the iteration contains one or more non-promise values and/or resolved/rejected promises, promise.race resolves to the first value found in the iteration.

Promise.race example of asynchrony

// we are passing as argument an array of promises that are already resolved,
// to trigger Promise.race as soon as possible
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.race(resolvedPromisesArray);
// immediately logging the value of p
console.log(p);
// using setTimeout we can execute code after the stack is empty
setTimeout(function(){
console.log('the stack is now empty');
console.log(p);
});
// logs, in order:
// Promise { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: 33 }
Copy the code

An example using promise.race -setTimeout

var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "one"); }); var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "two"); }); Promise.race([p1, p2]).then(function(value) { console.log(value); // "two" // both complete, but p2 is faster}); var p3 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "three"); }); var p4 = new Promise(function(resolve, reject) { setTimeout(reject, 500, "four"); }); Promise.race([p3, p4]).then(function(value) { console.log(value); }, function(reason) {// not called}); var p5 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "five"); }); var p6 = new Promise(function(resolve, reject) { setTimeout(reject, 100, "six"); }); Promise.race([p5, p6]).then(function(value) {// not called}, function(reason) {console.log(reason); // "six" // p6 is faster, so it fails});Copy the code
This paper draws lessons frompromise MDNLearning reporter