Hello, I’m Joshua (public account). Enthusiastic to do open source, write articles. Objective To help college students, just entering the workplace partners can build their own front-end learning system as soon as possible. If you are confused about your study, please follow me and find me to communicate. I will reply you in real time.

Two interesting questions about asyCN + await

I saw this article await in forEach. If you’re curious, take a look.

I found my understanding and use of asyCN function was not clear as before.

It’s weird. The more you use it, the less familiar you get, you know? In fact, it is not. I didn’t fully understand a certain point before. I was constantly being questioned in my work, so I have a good understanding of it.

This article is really about: why does the following code (the source code of this article) sensibly print the result once, rather than one line of output followed by another?

function api(i) { return new Promise((resolve, reject) => { setTimeout(() => { const n = Math.random(); If (n > 0.5) {resolve(n); } else { resolve(-n) } }, 1000 * 1); }); } const list = [1, 2, 3, 4, 5]; Async function fn() {// array forEach(async (el, index) => {const n = await API (index); console.log(n, index); }); }; fn();Copy the code

If you have that question, read on:

Let’s start with the following code:

function api () { return new Promise((resolve, Reject) => {setTimeout(function () {console.log('async content ') resolve()}, 4000)})} async function afn() {await API () console.log('await blocked after printing ')} function bFn () {console.log(' normal function ')} Afn () bFn() console.log(' global print ') Print result: // Normal function // global print // (after 4000ms...) // async async content // await blocks and printsCopy the code

In fact, our async function does not block the execution of other functions.

Asycn functions block only in their own functions and do not affect external functions.

So, we can see that normal function is printed first, global print, and then after 4000ms print async asynchronous content, await block print

Let’s go back to this code:

function api(i) { return new Promise((resolve, reject) => { setTimeout(() => { const n = Math.random(); If (n > 0.5) {resolve(n); } else { resolve(-n) } }, 1000 * 1); }); } const list = [1, 2, 3, 4, 5]; async function fn() { list.forEach(async (el, index) => { const n = await api(index); console.log(n, index); }); }; fn();Copy the code

It is easy to understand that multiple async functions are executed in sequence.

The code looks something like this:

function api(i) { return new Promise((resolve, reject) => { setTimeout(() => { const n = Math.random(); If (n > 0.5) {resolve(n); } else { resolve(-n) } }, 1000 * 1); }); } async function aFn() { const n = await api(1); console.log(n, 1); } async function bFn() { const n = await api(2); console.log(n, 2); } async function cFn() { const n = await api(3); console.log(n, 3); } async function dFn() { const n = await api(4); console.log(n, 4); } aFn() bFn() cFn() dFn()Copy the code

At the same time, the article another piece of code (appeal article source code), and the above code comparison, big guy may meng 😵 once, more interesting:

function api(i) { return new Promise((resolve, reject) => { setTimeout(() => { const n = Math.random(); If (n > 0.5) {resolve(n); } else { resolve(-n) } }, 1000 * 2); }); } const list = [1, 2, 3, 4, 5]; async function fn() { for (let i = 0; i < list.length; i++) { const n = await api(i); console.log('for--------', n, i); }}; fn();Copy the code

And you can think about, what does this code look like, sensibly?

Yes, it’s one line of output followed by another line of output, which is very obvious to the senses.

In fact, this code could be equivalent to the following:

function api(i) { return new Promise((resolve, reject) => { setTimeout(() => { const n = Math.random(); If (n > 0.5) {resolve(n); } else { resolve(-n) } }, 1000 * 2); }); } async function fn() { const n1 = await api(1) console.log('n1: ', n1); const n2 = await api(2) console.log('n2: ', n2); const n3 = await api(3) console.log('n3: ', n3); const n4 = await api(4) console.log('n4: ', n4); }; fn();Copy the code

So, finally, the async function execution, which does not block the execution of functions outside async function, blocks the area in asyCN function.

Under the dynamic hands

  • Follow me on GitHub @huangyangquang ⭐⭐
  • Welcome to follow my official account:Joshua, the front end senior