JS ES6 asynchronous solution

Time:2022-5-6
catalogue
  • The callback function is initially used
  • ES6 asynchronous processing model
  • API tailored for this asynchronous model: promise

The callback function is initially used

Because there was no clear specification in the original j s official, the parameters in the callback function transmitted from the asynchronous function encapsulated in various third-party libraries were not clearly specified, and the meaning of each parameter was not clear, so it was not easy to use.

But there are clear specifications in node

Callback mode in node:

1. All callback functions must have two parameters. The first parameter indicates error and the second parameter indicates result

2. All callback functions must be used as the last parameter of the function

3. All callback functions cannot appear as attributes

ES6 asynchronous processing model

After the emergence of ES6, the government put forward the specification of asynchronous processing and a processing model suitable for all asynchronous scenarios. The model includes:

  • Two stages: unsettled and settled.
  • Three statuses: pending, resolved and rejected
  • Always push the undecided stage to the determined stage, and the state of the determined stage will not change

Subsequent processing may be required after the task is determined,

  • The subsequent processing of resolved is called thenable
  • The subsequent processing of rejected is called catchable

API tailored for this asynchronous model: promise

How to use promise

Copy

const task = new Promise((resolve, reject) => {     
    //Task pending phase code  
    //Execute immediately  
    console. Log ("start the 100 meter run");  
    setTimeout(() => {  
       if (Math.random() > 0.5) {  
           //Success: finished  
           //Push to success  
           Resolve ("run over");  
       } else {  
           //Failure: broken leg  
           //Push to failure  
           Reject ("broken leg");  
       }  
    }, 1000)
});
task.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
})

After 1s, the task will be pushed to the determined, and the subsequent processing will be processed in then or catch.

be careful

Pending status = rejected status:

Copy

1. Call reject

2. Code execution error

3. Manually throw an error

Subsequent processing functions must be asynchronous and will be placed in the micro queue,

J s after the execution stack is cleared, the tasks in the micro queue will be executed first, and the tasks in the macro queue will be executed only after the tasks in the micro queue are cleared.

  • Macro task queues include: setTimeout, setinterval, setimmediately, I / O, UI render
  • Micro task queues include promise, process nexttick,Object. Observe, mutation observe

Async await is a new promise syntax sugar in ES7. You can also understand it. This article only gives an overview of promise, and there are many other details to master

The above is the details of JS ES6 asynchronous solution. For more information about ES6 asynchronous solution, please pay attention to other relevant articles of developeppaer!