Events are divided into

Asynchronous events are subdivided into macro tasks and microtasks

Macro task 1, a new program or subroutine is executed directly, such as

Microtasks 1, promise.then ().catch().finally() 2, and process.nextTick() in Node.js

Others: Object.Observe, etc

The same task may be classified as a macro task in one browser and a microtask in another. Some browsers will classify promise.then () as macro tasks, and the dominant category is microtasks.

The execution of macro tasks and microtasks requires an Event Loop Event Loop, and the Event Loop will constantly look for executable tasks to execute. After executing a synchronous task, the task in the microtask queue will be executed first. 2. Browser rendering (if any). 3. Perform macro tasks. 4. Repeat 1, 2, 3

Now that you know the categories of macro and micro tasks above, move on to the example /*

setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); resolve(); console.log(“3”); }).then(() => { console.log(“4”); }).then(() => { console.log(“5”); }) console.log(“6”); */ // The output of the above block is 2 3 6 4 5 1

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); // No clear result console.log(“3”); }).then(() => {// Then () does not execute console.log(“4”); }).then(() => { console.log(“5”); }) console.log(“6”); */ / The output of the above block is 2, 3, 6, 1

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); reject(); console.log(“3”); }).catch(() => { console.log(“4”) }).then(() => { console.log(“5”); }) console.log(“6”); */ // The output of the above block is 2 3 6 4 5 1

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); reject(); console.log(“3”); }).catch(() => { console.log(“4”); }). Catch (() => {console.log(“5”); Console. log(“6”); console.log(“6”); */ // The output of the above block of code is 2 3 6 4 1

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); reject(); console.log(“3”); }).catch(() => { console.log(“4”) reject(); }).catch(() => { console.log(“5”); }) console.log(“6”); */ // The output of the above block is 2 3 6 4 5 1

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); reject(); console.log(“3”); }).catch(() => { console.log(“444”); reject(); console.log(“4”) }).catch((a) => { console.log(“5”); }) console.log(“6”); */ / reject(); // reject(); // reject()

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); resolve(); console.log(“3”); }).catch(() => { console.log(“4”) }).then(() => { console.log(“5”); }) console.log(“6”); */ / The result of this block of code is 2, 3, 6, 5, 1 // The block of code above, // catch and then are immediately after the Promise constructor

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); reject(); console.log(“3”); }).catch(() => { console.log(“4”); reject(“rejected”); }).catch((a) => { console.log(a); // error console.log(“5”); }) console.log(“6”); * /

Reject: reject is not defined 5 1 */ // You cannot call reject unless you are directly inside the Promise constructor because it is not in scope.

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); setTimeout(() => {resolve(); }) // macro task console.log(“3”); }).then(() => { console.log(“4”); }).then(() => { console.log(“5”); }) console.log(“6”); */ // The output of the above block is 2 3 6 1 4 5

/* setTimeout(() => { console.log(“1”); }) new Promise((resolve, reject) => { console.log(“2”); return; console.log(“3”); resolve(); }).then(() => { console.log(“4”); }).then(() => { console.log(“5”); }) console.log(“6”); */ // The result of the above block 2 6 1 // returns the end of the Promise constructor

Synchronous update in their own language finches https://www.yuque.com/diracke…