An article thoroughly get to know asynchronous, synchronous, setTimeout, Promise, async (reprint)

Original link: https://blog.csdn.net/weixin_43606158/article/details/91360230

Prior to look at big brother's blog to see other articles on setTimeout, promise there async execution order. After watching a few still do not understand how, so he started analyzing the code, and analyzed in this article, I believe that through this article and friends can also synchronize asynchronous, setTimeout, Promise, async content gains, then down and let us into the topic:

This is the other big brother blog inside the code:

async function async1() {
   console.log('async1 start')
   await async2()
   console.log('async1 end')
}
async function async2() {
   console.log('async2')
}
console.log('script start')
setTimeout(() => {
	console.log('setTimeout')
},0)
async1()
new Promise((resolve) => {
	console.log('promise1')
	resolve()
}).then(() => {
	console.log('promise2')
})
console.log('script end')

The results (different browsers execution results may vary, I use Google):

PS: I have the following key points in bold to ring up friends, oh, watch carefully
this time I opened the two-screen mode to see the results of its execution of this code guess it's the law, then look MDN documentation , the result is clear.
We now work together to analyze the code:

async function async1() {
   console.log('async1 start')
   await async2()
   console.log('async1 end')
}
async function async2() {
   console.log('async2')
}

It's just the two of asynchronous defined function (), and did not call, they do not control.

console.log('script start')

This is the synchronization of content, it will be directly executed

1.输出 script star

setTimeout(() => {
	console.log('setTimeout')
},0)

setTimeout is a timer, asynchronous, they were thrown into the task queue inside, never mind, we only need to remember that there are asynchronous queue he can.

async1()

Async1 function call, this function will be to walk into, we first look at what this function:
PS: Note the point:
when calling async function returns a Promise object. Promise objects are executed immediately, will be introduced later in detail.

async function async1() {
   console.log('async1 start')
   await async2()
   console.log('async1 end')
}

This time will

2.输出async1 start，

Then to await async2 ()
It should be noted it, it will make async function encounters await suspended, async been executed in the subsequent content will await thrown into the content to the browser task queue to go inside the async years.
So here then output the async1 start

3.输出了async2

async2 after finished and went back to the caller's location async1. The part async1 not performed thrown into the task queue to go inside. (Which has a task queue now setTimeout and async1 of a subsequent content)

Then we went to the Promise:

new Promise((resolve) => {
	console.log('promise1')
	resolve()
}).then(() => {
	console.log('promise2')
})

Promise is executed immediately, so it will immediately

4.输出promise1。

Then it is executed resolve. .then method is successful, the implementation of successful will into the promise of years, but it is asynchronous callback function, it will be thrown into the task queue. (Which has a task queue now setTimeout and subsequent content in a async1 .then content plus the promise)

Finally we come:

console.log('script end')

Because it is synchronized, it will be executed directly.

5.输出：script end

The first five we have finished the analysis, next to the key point:
now asynchronous queue has three tasks are:

setTimeout
subsequent content async1 of
.then content promise of
these three elements setTimeout will last execution, like css heavier than the right priorities, we can fix in mind, setTimeout的优先级没有async和promise级别高(in fact, async and promise are the same, because when you call async method is a promise to return the object)
and then async and promise of .then to see who enters the job queue inside, which has the task queue FIFO concept. So obviously the result of their three output order is:
6. 输出：async1 end
7. The 输出：promise2
8输出：setTimeout

Just write to friends in a code, I guess together what the results would be:

setTimeout(() => {
	console.log('setTimeout')
}, 0)
console.log('t1')
fetch('http://dict.qq.com')
 .then(function(response) {
   return response.json();
 })
 .then(function(myJson) {
   console.log('myJson');
 })
 .catch(function(err) {
 	console.log(err)
 })
console.log('fetch zhi hou')
async function async1() {
	console.log('async1 start')
	await async2()
	console.log('async1 end')
}
async1()
console.log('t2')
new Promise((resolve) => {
	console.log('promise')
	resolve()
}).then(() => {
	console.log('promise.then')
})
console.log('t3')
async function async2() {
	console.log('async2')
}
console.log('t4')

Results of the:

----------------
Disclaimer: This article is CSDN blogger "super Wu Di 'original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source and this link statement.
Original link: https: //blog.csdn.net/weixin_43606158/article/details/91360230