That’s right, I’m updating this post again while everyone is on vacation

preface

Entry article, when seeing other big guy article, arrange, summed up a few knowledge points. Make the article output to strengthen memory.

1. Introduce macro and micro tasks

A brief introduction, and only a few commonly used and used in this article are listed.

Macro task

Macro tasks: Script, setTimeout, setInterval, setImmediate, etc.

Micro tasks

Microtasks: promise.then () or catch(), await in async functions immediately after function/statement (see details), nextTick (e.g. Vue, node, etc.)

Execution order

Enter the script tag (or js file) and all js code defaults to a macro task (called macro 1). Then promise.then () or catch() encountered during macro task execution are added to the microtask (denoted as: micro 1); Encounter setTimeout to join the next macro task (called: macro 2); The code is executed in the following order: macro 1-> micro 1-> macro 2-> micro 2…

It doesn’t matter if you don’t understand, the sea tactics start (background music……)

2, Promise related

Chestnut 1

new Promise( resolve= > {
  console.log(1);
}).then( res= > {
  console.log(2);
});
console.log(3);
Copy the code

Chestnut 2

new Promise( resolve= > {
  console.log(1);
  resolve()
}).then( res= > {
  console.log(2);
});
console.log(3);
Copy the code

Chestnut 3

new Promise( resolve= > {
  console.log(1);
  resolve()
}).then( res= > {
  console.log(res);
});
console.log(3);
Copy the code

Chestnut 4

new Promise( (resolve,reject) = > {
  console.log(1);
  resolve(2)
  resolve(3)
  reject(4)
}).then( res= > {
  console.log(res);
}).catch( res= > {
  console.log(res)
});
console.log(3);
Copy the code

Knowledge point analysis

If a Promise returns a value (resolve or return), then the Promise will be executed. 3. Then execution will be delayed until the macro task is completed, and the parameter is associated with the parameter returned by resolve

So, do you want to rethink your answers to the above four questions?

Big guy: You’re teaching me how to do things??

Yes, of course, is confident to turn down!!

The answer

Chestnuts 1:1,3

Chestnut 2:1,3,2

Chestnut 3:1,3,undefined

Chestnuts 4:1,3,2

Big Guy 1: Is that it?

Big Guy 2: That’s it?

Big Guy 3: That’s it? The ophthalmic topic is very simple.

Big guy 4: the topic is simple, so this person IQ is low, confirm complete.

3. Promise and setTimiout

Then the difficulty increased, after all, I will soon graduate from the third grade of primary school, can not be too easy.

Chestnut 1

console.log('start');
new Promise( (resolve,reject) = > {
  console.log('promise');
  resolve('then')
  reject('reject')
  setTimeout( () = > {
    console.log('setTimeout')
  },)
}).then( res= > {
  console.log(res);
}).catch( res= > {
  console.log(res)
});
console.log('end');
Copy the code

Chestnut 2

new Promise( (resolve,reject) = > {
  setTimeout( () = > {
    console.log('setTimeout')
    resolve('then')
  },)
  resolve('then')
}).then( res= > {
  console.log(res);
})


Copy the code

Chestnut 3

new Promise( (resolve,reject) = > {
  console.log('promise')
  setTimeout( () = > {
    console.log('setTimeout')
    resolve('then')
  },)
}).then( res= > {
  console.log(res);
})
Copy the code

Chestnut 4

var promise1 = () = >(
  new Promise( (resolve,reject) = > {
    console.log('promise1');
    promise2().then( res= > {
      console.log(res)
    })
    setTimeout( () = > {
      console.log('setTimeout');
      resolve('then1'); }); }));var promise2 = () = > (
  new Promise( resolve= >{
    console.log('promise2');
    resolve('then2'); })); promise1().then(res= > {
  console.log(res);
});
Copy the code

Just who scold my intelligence quotient is low, the question is simple, come, give you a red buff, net pass one, blue square, f6 side grass.

Knowledge point analysis

Analyze the process execution of Chestnut 4 in detail:

Enter the JS file and all the code defaults to macro 1 tasks.

JavaScript starts executing (macro 1), promise1 function, promise2 function declared early,

1. Execute the content of the promise1 function (macro 1) : enter new Promise, console print promise1,

The console prints new Promise. The new Promise of promise2 enters the resolved state and returns then2.

The.then() function of promise2 is inserted into the micro-task (micro 1).

4. Run the setTimeout timer and put all the contents of the timer into macro task macro 2 for execution

5. After the function is executed, continue to execute the promise1 function. Then () function, no resolve or return is returned, so the function is not executed.

6. Macro 1 completes execution and starts to execute micro 1 task.

Promise2. Then (), console print then2

When macro 2 executes setTimiout, the console prints setTimeout and leaves the resolved state as set.

Then () add the resolve task (w2)

10. Perform the micro 2 task and the console prints then1.

Console: promise1 promise2, then2, setTimeout, then1

On second thought, let’s draw a picture.

The answer

Chestnut 1: start, promise, end, then, setTimeout

Then,setTimeout

Chestnut 3: Promise,setTimeout,then

4: chestnut promise1, promise2 then2, setTimeout, then1

Big guy 1: I made a mistake.

Big guy 2: upstairs garbage (secretly hide wrong topic this).

Big guy 3: There’s garbage upstairs.

Big guy 4: upstairs all rubbish, I most XX(known: XX === next year zodiac).

I am exhausted when I write here, and I am struggling with whether to continue writing, because I have used up my knowledge of grade three in primary school (I just got a bad news: our co-working partner will leave work early for a holiday in one hour, and we will stay for two days).

4. Promise combined with async/await

How to do, have used the first day of knowledge, and I will not, how to make up a wave?

Oh, by the way, check out the big guys’ 5 Minute Primer.

Chestnut 1

console.log(1)
async function async1() {
  console.log(2);
  await async2();
  console.log(3);
}
async function async2() {
  console.log(4);
}
async1();
console.log(5)
Copy the code

Chestnut 2

async function async1() {
  console.log(1);
  await new Promise( resolve= > {
  	console.log(2)
    resolve(5)
  }).then( res= > {
  	console.log(3)
  }).finally( res= > {
  	console.log(4)});console.log(5);
}
async1();
console.log(6)
Copy the code

Chestnut 3

async function async1() {
  console.log(1);
  await new Promise( resolve= > {
  	console.log(2)
  }).then( res= > {
  	console.log(3)
  }).finally( res= > {
  	console.log(4)});console.log(5);
}
async1();
console.log(6)
Copy the code

Chestnut 4

async function async1 () {
  console.log('1');
  await new Promise(resolve= > {
    console.log('2')
    resolve('3')})console.log('4');
  return '5'
}
console.log('6')
async1().then(res= > {
  console.log(res)
})
new Promise(resolve= > {
  console.log('7')
  setTimeout(() = > {
    console.log('8')})})Copy the code

Knowledge point analysis

1. Await the content immediately after the function (statement) will be delayed (equivalent to a micro task to be executed after the macro task is completed)

2, await function (statement) if it is a promise function and returns no value (resolve/reject), the statement immediately following the promise will not be executed until the promise function returns a value

The answer

Chestnuts 1:1,2,4,5,3

Chestnuts 2:1,2,6,3,4,5

Chestnut 3:1,2,6

Chestnuts 4:6,1,2,7,4,5,8

Big guy 1: I got three questions wrong.

Big guy 2: I also made a mistake (actually two mistakes).

Big guy 3: Upstairs half my level, young people now… (Secretly hide the wrong question book).

Big guy 4: upstairs rubbish, the question is too easy

5

I finally saw the boss level,

Face the dragon, warrior.

If you can kill the dragon, then you are the next dragon.

Chestnut 1

var promise1 = () = > (
  new Promise( resolve= > {
    console.log(1);
    var promise2 = new Promise( resolve= > {
      console.log(2);
      setTimeout( () = >{
        console.log(3);
        resolve();
      },0);
    });
    resolve()
    promise2().then( () = > {
      console.log(4); }); })); promise1().then(() = > {
  console.log(5);
});
console.log(6);
Copy the code

Chestnut 2

const promise1 = new Promise( (resolve) = > {
  setTimeout( () = > {
    resolve(1);
    console.log(2)},0)
  resolve(3);
  resolve(4);
}).then(res= > {
  console.log(res)
  setTimeout(() = > {
    console.log(5)},1000)
}).finally(res= > {
  console.log('finally', res)
})
Copy the code

Chestnut 3

async function async1 () {
  console.log('1');
  await new Promise(resolve= > {
    console.log('2')
    resolve('3')})console.log('4');
  return '5'
}
console.log('6')
async1().then(res= > {
  console.log(res)
})
new Promise(resolve= > {
  console.log('7')
  setTimeout(() = > {
    console.log('8')})})Copy the code

The answer

Chestnuts 1:1,2,6,5,3

Chestnut 2:3,2:5

Chestnut 3:6,1,2,7,4,5,8

Big guy 1: Autistic ing.

Big guy 2: Let go of me, I can still do the problem, let go of me, you don’t come over

Big guy 3: The third question feels strange.

Big guy 4: why do you want to do the topic to top up, you think I stupid, you waste my afternoon time, do you believe me… % % & * & % $#… 10, Omit ten thousand words to wish you a happy New Year.

6, summary

There is no end to learning.

I’ve been on the top of mountains and I’ve been down on valleys, and I’ve learned a lot from both. ———— Gems (LOL)

Happy New Year.