1-1.await
await
Which means that waiting . It can be followed by an expression. If a value (e.g., strings, numbers, objects, etc. Normal), then the return value is the value itself.- However, the most common is followed by an
promise
object.await
We will wait for thepromise
state by thepending
turnfulfilled
orrejected
. During this period it will be blocked, delayed the implementation of the latter await sentence statement. - If
promise
the result is that the objectresolve
, it will beresolve
of value as aawait
calculation result of the expression.
The nature of syntactic sugar
In fact, await
and async
it is itself promise
of syntactic sugar programming. Compare the two usages.
// 异步promise化的函数--模拟请求后端接口
function asyncFn () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (true) {
console.log('resolve console')
resolve('resolve return')
} else {
reject('reject return')
}
}, 2000)
})
}
// promise
asyncFn().then((res) => {
console.log(res)
}, (err) => {
console.log(err)
})
// await
try {
var res = await asyncFn()
console.log(res)
} catch(err) {
console.log(err)
}
// 如果有第二次请求的话,promise需要在then方法继续调用,再用then接受,过多的嵌套依然会增加阅读难度。而await async只需要像写同步代码一样继续书写就可以,它是解决异步编程回调地狱的终极手段。
Example One
// ps:由于js本身现在已经限制了await必须用在async函数中,否则会报错。所以请将下面的复制粘贴到浏览器控制台查看结果
function asyncFn () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (true) {
console.log('resolve console')
resolve('resolve return')
} else {
reject('reject return')
}
}, 2000)
})
}
var value1 = await asyncFn()
var value2 = await 'plain text'
console.log(value1)
console.log(value2)
//浏览器会依次打印 ‘resolve console’ ‘resolve return’ ‘plain text’
Example Two
If you have questions about the results, you can asyncFn front await removed, and then console in the browser once.
These two compare, you will find the second of resolve console
the final print out, and the first is the first printing.
Fundamental reason is that the first code await
block the execution of the sentence behind, waiting promise
to continue after the end of the statement to determine the result.
Example Three
The former two cases can be imagined, if both of await
the latter is followed by promise
an object. Then the second await the waiting time is itself waiting for the first time plus await
waiting time
function asyncFn1 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (true) {
console.log('resolve console1')
resolve('resolve return1')
} else {
reject('reject return1')
}
}, 2000)
})
}
function asyncFn2 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (true) {
console.log('resolve console2')
resolve('resolve return2')
} else {
reject('reject return2')
}
}, 2000)
})
}
var value1 = await asyncFn1()
var value2 = await asyncFn2()
// 复制并执行,会发现2s后打印了‘resolve console1’,4s后打印了‘resolve console2’
Think
// 已经知道了await会阻塞代码的执行,如果我们在实际开发中有这样的代码。
function fn () {
// 假设request是请求后端接口
var value = await request()
console.log(value)
// ...
}
fn()
var arr = []
arr.push('1')
// ...其他不依赖后端接口逻辑
After fn call, due to the await
obstruction, it is bound to affect the following logic. In the actual development, if the backend interface 5s only response, then the following code will need to wait for 5s. This is obviously unreasonable, in order to solve this phenomenon, we need async
a statement.
1-2.async
Before we know the await
implementation of the code will be blocked. The means to solve the drawbacks is that async
statement.
async function asyncFn () {
return 'async'
}
console.log(asyncFn())
Console print, you will find is a print promise
object. And is Promise.resolve
the object. resolve
The value is asyncFn
a function of the return value async
.
If the function does not return a value, then it is natural to return would be Promise.resolve(undefined)
.
In fact, the reason why async
the statement can solve the await
blocking problem, because async
the statement will be made a function layer of promise
packaging, so that the internal asynchronous operation is actually a pending
converted resolve
or reject
processes. This function itself can freely call inside the function await
will no longer affect the function of the external code execution.