This is the 9th day of my participation in Gwen Challenge

Relearn JavaScript in a series of articles…

We all know that JavaScript is a “single-threaded” language, which can only perform one task at a time, not multiple JS code tasks at the same time. If there are time-consuming tasks, the subsequent tasks can only be queued, which will delay the execution of the entire program, resulting in page stalling, and even cause the page to fake death. To solve this problem, the JavaScript language introduces synchronous and asynchronous tasks, and this article covers asynchronous programming.

Callback () callback function

Let’s first look at handling asynchrony using the callback() callback function. Ajax asynchronous requests are probably the most common form of asynchronous programming. Here’s an example:

$.ajax({url:'/testurl', success:function(){// callback successfully processed request}})Copy the code

If there are multiple nested requests, the code falls into “callback territory.” The resulting problems include:

  1. Bloated code and poor readability
  2. Code coupling degree is high, poor maintainability, difficult to reuse
  3. Callback functions are anonymous and are not easy to reuse

Let’s look at ES6 Promise, which offers a more logical solution for asynchronous programming.

Promise lifecycle

This is a big pity. The Promise object has three states, which are pending, fulfilled and rejected. A Promise is created in a pending state, which can only change in one of two ways. One is that the pending state will be changed to depressing when there is success. The other way is to change the status to Rejected when you fail.

Promise execution order

const promise = new Promise((resolve,reject)=>{ console.log(1) resolve() console.log(2) }) promise.then(res=>{ Console.log (3)}) console.log(4) promise.then(res=>{console.log(5)}) // the output sequence is 1,2,4,3,5Copy the code
  1. A Promise is executed immediately after it is created, printing 1.
  2. The resolve() function fires the callback specified by then(), but it waits for the synchronization code in the current thread to complete, so it prints 2, then 4
  3. When all synchronized code is finished, then() is executed, with two callbacks, output 3 and output 5.

Promise handling exceptions

Catch () is usually recommended to catch the Promise exception. This pairs catch() with then(), and catch() takes the arguments passed by the rejected() function.

Why is the catch() function recommended? Look at an example

Promise.resolve()
  .then(res=>{
		throw new Error('error')
	},err=>{
  	console.log('err',err)
}).catch(err=>{
	 console.log('err',err)
})
Copy the code

In this example, the second function of the then() function cannot catch the exception thrown by the first function, whereas the catch() function can catch the exception thrown by the first function, which is why it is recommended to use catch() to handle the Rejected state.

Promise.all()

const p = Promise.all([p1,p2,p3,p4])
Copy the code

The state of P is determined by all the Promise states received by the all() function. Only when all the received Promise instance states become a pity, the state of P will become a pity. If there is a rejected state, the P state is Rejected. It is important to note that when the received Promise instance has a catch() function defined, the Rejected state will catch() itself and will not trigger the catch() function of promise.all ().

const p1 = new Promise((resolve,reject)=>{ resolve(1) }) const p2 = new Promise((resolve,reject)=>{ throw new Error('error') }).catch(err=>err) Promise.all([p1,p2]).then(res=>{ console.log(res) // [1,'error'] }).catch(err=>{ // Here p2's exception is not caught by promise.all, but is digested by itself. // AFTER P2 executes the catch() function, the state of P2 will be fulfilled gradually. Console. log(' exception ',err)})Copy the code

Promise.race()

const p = Promise.race([p1,p2,p3])
Copy the code

If any of the received Promise instances changes, the state of p instance changes, and the first Promise instance returned value is used as a callback to p instance.

Such a scenario can be realized. If Ajax request 3s does not receive a successful response, it will be automatically processed as a request failure.

const p1 = ajaxGet('testUrl')
const p2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
  	reject(new Error('request timeout 3s'))
  },3000)
})
const p = Promise.race([p1,p2])
Copy the code

Promise.resolve()

Converting the passed variable to a Promise object is equivalent to calling the resolve() function within the Promise function. After the promise.resolve () function is executed, the state of the Promise will immediately become fulfilled, which will then be processed in the then() function.

Promise. Resolve () // equivalent to new Promise(resolve=>resolve())Copy the code

The promise.reject () function is the same, except that it enters the catch() function. I will not recount it here.

So far, we’ve looked at Promise, one of asynchronous programming’s basics.