The first step is to understand what promises are, what they do, and why they are used.

What is?

When you talk about promises, you’ll hear about callbacks, asynchrony, and things like that. In more general terms, promises are a way to write code, and they’re used to write asynchronous code in JavaScript programming.

Basic Usage:

Return new Promise(resolve,reject)=>{})

New Promise(function(resolve, reject) {... })Copy the code

The constructor takes a function as an argument that takes two arguments, both of which are callback functions provided by the JS engine, so you don’t have to deploy them yourself. The first parameter, resolve, which will be called when the asynchronous operation succeeds, has one parameter to pass the result of the success of the asynchronous operation. The second argument, reject, which is called when an asynchronous operation fails, has an argument that passes the message that the asynchronous operation failed. Such as:

Jsvar myPromise = new Promise(function(resolve, reject) {if(success) {resolve(value); } else { reject(error); }});

Use promise.prototype. then when there are dependencies between multiple functions that contain asynchronous operations, the following methods are recommended to clearly show dependencies.

When the THEN method returns a new Promise instance (note, not the original Promise instance). You can write it chained, where a then method is followed by another THEN method

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function (comments) {
  console.log("resolved: ", comments);
}, function (err){
  console.log("rejected: ", err);
});
Copy the code

Use of promise.all In a real project, you might encounter situations where you need the return results of the first two interfaces to get the request parameters of the third interface. That is, you need to wait for two or more asynchronous events to complete before calling back. For asynchronous callbacks, the first thing that comes to mind is the use of Promise encapsulation, followed by.then() to trigger the callback. The promise.all () method can then be used to trigger a callback after two or more asynchronous events have completed.

The promise.all (iterable) method returns an instance of a Promise that is resolved when all promises in iterable arguments are “resolved” or when the arguments do not contain the Promise; If a promise fails (Rejected), the instance calls back (reject) because of the result of the first failed promise.

var promise1 = Promise.resolve('promise1');
var promise2 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000.'promise2');
});
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000.'promise3');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// expected output: Array ["promise1","promise2", "promise3"]
Copy the code

As the name suggests, promse. race means a race, which means that whichever result is achieved faster in the promise. race([P1, P2, P3]) will return that result, regardless of whether the result itself is a success or failure state.

let p1 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    resolve('success')},1000)})let p2 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    reject('failed')},500)})Promise.race([p1, p2]).then((result) = > {
  console.log(result)
}).catch((error) = > {
  console.log(error)  // 打开的是 'failed'
})
Copy the code