Javascript asynchronous programming: Do you really understand Promise?

Preface

In asynchronous programming, Promise plays a vital role and is more reasonable and powerful than traditional solutions (callback functions and events). Some of you may have this question: It’s 2020, why are we still talking about Promise? In fact, some friends seem to understand this "old friend" that they deal with almost every day, but they may have many questions if they dig deeper. This article will help you to have a deeper understanding of this familiar stranger - Promise.

Basic Usage

grammar

new Promise( function(resolve, reject) {...} /* executor */ )

• When constructing a Promise object, you need to pass in an executor function, and the main business processes are executed in the executor function.
• When the Promise constructor is executed, the executor function is called immediately. The resolve and reject functions are passed to the executor as parameters. When the resolve and reject functions are called, the state of the promise is changed to fulfilled or rejected respectively. Once the state changes, it will not change again, and the result can be obtained at any time.
• When the resolve function is called in the executor function, the callback function set by promise.then will be triggered; and when the reject function is called, the callback function set by promise.catch will be triggered.

It is worth noting that Promise is used to manage asynchronous programming. It is not asynchronous itself. When new Promise is created, the executor function will be executed immediately. However, we usually process an asynchronous operation in the executor function. For example, in the following code, 2 will be printed out at the beginning.

let p1 = new Promise(()=>{
    setTimeout(()=>{
      console.log(1)
    },1000)
    console.log(2)
  })
console.log(3) // 2 3 1

Promise uses callback function delayed binding technology. When the resolve function is executed, the callback function has not been bound yet, so the execution of the callback function can only be postponed. What does this mean exactly? Let's look at the following example:

let p1 = new Promise((resolve,reject)=>{
  console.log(1);
  resolve('Boat in the waves')
  console.log(2)
})
// then: Set the method for post-processing success or failure p1.then(result=>{
 //p1 delayed binding callback function console.log('success'+result)
},reason=>{
  console.log('failed' + reason)
})
console.log(3)
// 1
// 2
// 3
// Success in the Waves

When new Promise is created, the executor function is executed first, and 1 and 2 are printed. When Promise is resolved, the microtask is triggered, or the synchronous task is continued.

When p1.then is executed, two functions are stored (these two functions have not been executed at this time), and then 3 is printed. At this time, the synchronization task is completed, and finally the microtask is executed, thereby executing the successful method in .then.

Error handling

The error of the Promise object has a "bubbling" nature and will be passed back until it is handled by the onReject function or captured by the catch statement. With this "bubbling" feature, there is no need to catch exceptions separately in each Promise object.

To encounter a then, execute the success or failure method, but if this method is not defined in the current then, it will be postponed to the next corresponding function

function executor (resolve, reject) {
  let rand = Math.random()
  console.log(1)
  console.log(rand)
  if (rand > 0.5) {
    resolve()
  } else {
    reject()
  }
}
var p0 = new Promise(executor)
var p1 = p0.then((value) => {
  console.log('succeed-1')
  return new Promise(executor)
})
var p2 = p1.then((value) => {
  console.log('succeed-2')
  return new Promise(executor)
})
p2.catch((error) => {
  console.log('error', error)
})
console.log(2)

This code has three Promise objects: p0~p2. No matter which object throws an exception, the last object p2.catch can be used to catch the exception. In this way, errors of all Promise objects can be merged into one function for processing, thus solving the problem that each task needs to handle exceptions separately.

In this way, we eliminate nested calls and frequent error handling, which makes the code we write more elegant and more in line with human linear thinking.

Promise chain call

We all know that we can chain multiple Promises together to represent a series of different steps. The key to this approach is the following two inherent behaviors of Promises:

• Every time you call then on a Promise, it creates and returns a new Promise, which we can chain;
• Whatever value is returned from the fulfillment callback (first argument) of the then call, it will automatically be set as the fulfillment of the chained Promise (in the first point).

Let's first explain what this sentence means through the following example, and then introduce the execution process of chain call in detail.

let p1 = new Promise((resolve, reject) => {
    resolve(100) // determines the next successful method in the then to be executed})
// Connect to p1
let p2=p1.then(result=>{
    console.log('Success 1 '+result)
    return Promise.reject(1) 
// Return a new Promise instance, which determines that the current instance is a failure, so the next then method will be executed}, reason=>{
    console.log('Failure 1 '+reason)
    return 200
})
// Connect to p2 
let p3=p2.then(result=>{
    console.log('Success 2' + result)
},reason=>{
    console.log('Failure 2 '+reason)
})
// Success 1 100
// Failure 2 1

We complete the promise p2 created and returned by the first call to then by returning Promise.reject(1) . p2’s then call, when run, receives the fulfillment value from the return Promise.reject(1) statement. Of course, p2.then creates another new promise, which can be stored in the variable p3.

The success or failure of the instance generated by new Promise depends on whether the resolve or reject is executed when the executor function is executed, or if an abnormal error occurs during the execution of the executor function. In both cases, the instance status will be changed to failure.

The state of the new instance returned by p2 when executing then determines which method in the next then will be executed. There are several situations:

• Regardless of whether it is a successful method execution or a failed method execution (the two methods in then), if an exception is thrown during execution, the instance status will be changed to failed.
• If a new Promise instance is returned in the method (such as Promise.reject(1) in the above example), the result of returning this instance is success or failure, which also determines whether the current instance succeeds or fails.
• The remaining cases are basically to make the instance become a successful state, and the result returned by the previous then method will be passed to the next then method.

Let’s look at another example

new Promise(resolve=>{
    resolve(a) // Error // This executor function execution has an exception error, which determines that the next then failure method will be executed}).then(result=>{
    console.log(`Success: ${result}`)
    return result*10
},reason=>{
    console.log(`Failed: ${reason}`)
// When executing this sentence, no exception occurs or a failed Promise instance is returned, so the next then success method will be executed // There is no return here, and undefined will be returned in the end
}).then(result=>{
    console.log(`Success: ${result}`)
},reason=>{
    console.log(`Failed: ${reason}`)
})
// Failure: ReferenceError: a is not defined
// Success: undefined

async & await

From the above examples, we can see that although using Promise can solve the problem of callback hell very well, this method is full of Promise's then() method. If the processing flow is more complicated, the entire code will be full of then, the semantics are not obvious, and the code cannot well represent the execution flow.

The implementation of async/await, a new asynchronous programming method added in ES7, is based on Promise. Simply put, the async function returns a Promise object, which is the syntax sugar of generator. Many people think that async/await is the ultimate solution for asynchronous operations:

• The syntax is concise, more like synchronous code, and more in line with common reading habits;
• Improve the code organization method for serial execution of asynchronous operations in js to reduce callback nesting;
• You cannot customize try/catch for error capture in Promise, but you can handle errors in Async/await like synchronous code.

However, there are also some disadvantages, because await transforms asynchronous code into synchronous code. If multiple asynchronous codes have no dependencies but use await, performance will be reduced.

async function test() {
  // If the following code has no dependencies, you can use Promise.all // If there are dependencies, it is actually an example of solving callback hell await fetch(url1)
  await fetch(url2)
  await fetch(url3)
}

Looking at the following code, can you tell what is printed?

let p1 = Promise.resolve(1)
let p2 = new Promise(resolve => {
  setTimeout(() => {
    resolve(2)
  }, 1000)
})
async function fn() {
  console.log(1)
// When the code executes to this line (put this line first), build an asynchronous microtask // Wait for the promise to return the result, and the code below await is also listed in the task queue let result1 = await p2
  console.log(3)
  let result2 = await p1
  console.log(4)
}
fn()
console.log(2)
// 1 2 3 4

If the logic expressed on the right side of await is a promise, await will wait for the return result of the promise. Only when the returned status is resolved will the result be returned. If the promise is in a failed state, await will not receive its return result, and the code below await will not continue to execute.

let p1 = Promise.reject(100)
async function fn1() {
  let result = await p1
  console.log(1) //This line of code will not be executed}

Let's look at a more complex question:

console.log(1)
setTimeout(()=>{console.log(2)},1000)
async function fn(){
    console.log(3)
    setTimeout(()=>{console.log(4)},20)
    return Promise.reject()
}
async function run() {
    console.log(5)
    await fn()
    console.log(6)
}
run()
//It takes about 150ms to execute for(let i=0;i<90000000;i++){}
setTimeout(()=>{
    console.log(7)
    new Promise(resolve=>{
        console.log(8)
        resolve()
    }).then(()=>{console.log(9)})
},0)
console.log(10)
// 1 5 3 10 4 7 8 9 2

Before doing this question, readers need to understand:

• Microtask-based technologies include MutationObserver, Promise, and many other technologies developed based on Promise. In this question, resolve() and await fn() are both microtasks.
• Regardless of whether the macro task has arrived or the order in which it is placed, every time the main thread execution stack is empty, the engine will prioritize the microtask queue, process all tasks in the microtask queue, and then process the macro task.

Next, we analyze step by step:

• First, execute the synchronous code, output 1, encounter the first setTimeout, put its callback into the task queue (macro task), and continue to execute
• Run run(), print out 5, and continue to execute, encounter await fn(), put it into the task queue (microtask)
• await fn() When the current line of code is executed, the fn function will be executed immediately, printing 3. When it encounters the second setTimeout, its callback is put into the task queue (macro task). The code below await fn() needs to wait for the return of the Promise success status before it will be executed, so 6 will not be printed.
• Continue to execute, encounter the for loop synchronization code, need to wait 150ms, although the second setTimeout has reached the time, but will not be executed, encounter the third setTimeout, put its callback into the task queue (macro task), and then print out 10. It is worth noting that a timer delay of 0 milliseconds is not actually achievable. According to the HTML5 standard, the minimum delay for setTimeOut execution is 4 milliseconds.
• After the synchronization code is executed, if there is no microtask at this time, the macrotask will be executed. The setTimeout mentioned above will be executed first and print 4.
• Then the next setTimeout macro task is executed, so 7 is printed first. When new Promise is executed, the executor function is executed immediately, and 8 is printed. Then when resolve is executed, the micro task is triggered, so 9 is printed.
• Finally, the first setTimeout macro task is executed, printing 2

Commonly used methods

1. Promise.resolve()

The Promise.resolve(value) method returns a Promise object that is resolved with the given value.
Promise.resolve() is equivalent to the following:

Promise.resolve('foo')
// Equivalent to new Promise(resolve => resolve('foo'))

The parameters of the Promise.resolve method are divided into four cases.

(1) The parameter is a Promise instance

If the parameter is a Promise instance, then Promise.resolve will return the instance unchanged without any modification.

const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})
p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail

In the above code, p1 is a Promise, which becomes rejected after 3 seconds. The state of p2 changes after 1 second, and the resolve method returns p1. Since p2 returns another Promise, the state of p2 itself becomes invalid, and the state of p2 is determined by the state of p1. Therefore, the subsequent then statements all target the latter (p1). After another 2 seconds, p1 becomes rejected, triggering the callback function specified by the catch method.

(2) The parameter is not an object with a then method, or is not an object at all

Promise.resolve("Success").then(function(value) {
 // The parameters of the Promise.resolve method will be passed to the callback function at the same time.
  console.log(value); // "Success"
}, function(value) {
  // will not be called });

(3) Without any parameters

The Promise.resolve() method allows you to call it without parameters and directly returns a Promise object in the resolved state. If you want to get a Promise object, a more convenient way is to directly call the Promise.resolve() method.

Promise.resolve().then(function () {
  console.log('two');
});
console.log('one');
// one two

(4) The parameter is a thenable object

A thenable object refers to an object with a then method. The Promise.resolve method converts this object into a Promise object, and then immediately executes the then method of the thenable object.

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value); // 42
});

2. Promise.reject()

The Promise.reject() method returns a Promise object with a rejection reason.

new Promise((resolve,reject) => {
    reject(new Error("error"));
});
// Equivalent to Promise.reject(new Error("Error"));  

// Usage method Promise.reject(new Error("BOOM!")).catch(error => {
    console.error(error);
});

It is worth noting that after calling resolve or reject, the mission of Promise is completed, and subsequent operations should be placed in the then method, and should not be written directly after resolve or reject. So, it is better to put return statement in front of them so that there will be no surprises.

new Promise((resolve, reject) => {
  return reject(1);
  // The following statements will not be executed console.log(2);
})

3. Promise.all()

let p1 = Promise.resolve(1)
let p2 = new Promise(resolve => {
  setTimeout(() => {
    resolve(2)
  }, 1000)
})
let p3 = Promise.resolve(3)
Promise.all([p3, p2, p1])
  .then(result => {
 // The results are returned in the order in which the instances are written in Array console.log(result) // [ 3, 2, 1 ]
  })
  .catch(reason => {
    console.log("failed:reason")
  })

Promise.all generates and returns a new Promise object, so it can use all the methods of the Promise instance. This method will return when all the Promise objects in the promise array passed as parameters have resolved, and the newly created Promise will use the values ​​of these promises.

If any of the promises in the parameters is rejected, the entire Promise.all call will terminate immediately and return a new Promise object of rejection.

4. Promise.allSettled()

Sometimes, we don't care about the results of asynchronous operations, we only care whether these operations are completed. At this time, the Promise.allSettled() method introduced by ES2020 is very useful. Without this method, it would be troublesome to ensure that all operations are completed. This is not possible with the Promise.all() method.

Suppose there is such a scenario: a page has three areas, corresponding to three independent interface data, and Promise.all is used to concurrently request the three interfaces. If any of the interfaces has an exception, the status is reject, which will cause the data of the three areas in the page to fail to come out. Obviously, this situation is unacceptable to us. The emergence of Promise.allSettled can solve this pain point:

Promise.allSettled([
  Promise.reject({ code: 500, msg: 'Service exception' }),
  Promise.resolve({ code: 200, list: [] }),
  Promise.resolve({ code: 200, list: [] })
]).then(res => {
  console.log(res)
  /*
    0: {status: "rejected", reason: {…}}
    1: {status: "fulfilled", value: {…}}
    2: {status: "fulfilled", value: {…}}
  */
  // Filter out the rejected status and ensure as much page area data as possible RenderContent(
    res.filter(el => {
      return el.status !== 'rejected'
    })
  )
})

Promise.allSettled is similar to Promise.all. It takes an array of Promises as a parameter and returns a new Promise. The only difference is that it does not short-circuit. That is, when all Promises are processed, we can get the status of each Promise, regardless of whether it is successfully processed.

5. Promise.race()

The effect of the Promise.all() method is "whoever runs slower will be the one to execute the callback", so there is another method that corresponds to "whoever runs faster will be the one to execute the callback", which is the Promise.race() method, and the word originally means racing. The usage of race is the same as all, receiving an array of promise objects as parameters.

Promise.all will not proceed with subsequent processing until all the received object promises have become FulFilled or Rejected. In contrast, Promise.race will continue with subsequent processing as long as one promise object enters the FulFilled or Rejected state.

// Execute resolve after `delay` milliseconds
function timerPromisify(delay) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(delay);
        }, delay);
    });
}
// If any promise is resolved or rejected, the program stops running Promise.race([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64)
]).then(function (value) {
    console.log(value); // => 1
});

The above code creates three promise objects, which will become confirmed after 1ms, 32ms and 64ms respectively, that is, FulFilled, and the callback function registered by .then will be called 1ms after the first one becomes confirmed.

6. Promise.prototype.finally()

ES9 adds a finally() method that returns a Promise. At the end of the promise, whether it is fulfilled or rejected, the specified callback function will be executed. This provides a way to pass code that needs to be executed whether or not the Promise is fulfilled successfully. This avoids the situation where the same statement needs to be written once in both then() and catch().

For example, before we send a request, a loading screen will appear. After the request is sent, regardless of whether the request has an error or not, we hope to turn off the loading screen.

this.loading = true
request()
  .then((res) => {
    // do something
  })
  .catch(() => {
    // log err
  })
  .finally(() => {
    this.loading = false
  })

The callback function of the finally method does not accept any parameters, which indicates that the operations in the finally method should be independent of the state and do not depend on the execution result of Promise.

Practical Application

Suppose there is such a requirement: the red light turns on once every 3s, the green light turns on once every 1s, and the yellow light turns on once every 2s; how can we make the three lights turn on alternately and repeatedly?
Three lighting functions already exist:

function red() {
    console.log('red');
}
function green() {
    console.log('green');
}
function yellow() {
    console.log('yellow');
}

The complexity of this problem lies in the need to "alternately and repeatedly" light up, rather than a one-time deal that ends after lighting up once. We can achieve this through recursion:

// Implement with promise let task = (timer, light) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (light === 'red') {
        red()
      }
      if (light === 'green') {
        green()
      }
      if (light === 'yellow') {
        yellow()
      }
      resolve()
    }, timer);
  })
}
let step = () => {
  task(3000, 'red')
    .then(() => task(1000, 'green'))
    .then(() => task(2000, 'yellow'))
    .then(step)
}
step()

The same can also be achieved through async/await:

// async/await implementation let step = async () => {
  await task(3000, 'red')
  await task(1000, 'green')
  await task(2000, 'yellow')
  step()
}
step()

Using async/await, you can write asynchronous code in the style of synchronous code. There is no doubt that the async/await solution is more intuitive, but a deep understanding of Promise is the basis for mastering async/await.

The above is the details of Javascript asynchronous programming. For more information about Javascript asynchronous programming, please pay attention to other related articles on 123WORDPRESS.COM!