一. 什么是async
开发中我们最常用的Promise有一个语法糖,就是async,翻译成中文是异步;它是一个修饰符,作用是将函数标记为异步函数,同时这个函数的返回值变成promise。
async function foo() {
return ["abc", "cba", "nba"]
}
foo2().then(res => {
console.log("res:", res)
})
二. 什么是await
await翻译成中文是等待,必须放在async修饰的函数中使用;await修饰的如果是promise对象,那么可以获取到promise中返回的内容(resolve、reject函数),且获取到值才会继续执行该函数的代码;如果修饰的不是promise,那么就会将值作为await表达式的结果,所以最常用的才是修饰promise函数。
function foo(t){
setTimeout(function(){
console.log(t);
},t)
}
async function foo1(){
let a = await foo(1000);
let b = await log(3000);
let c = log(2000);
console.log(a);
console.log(1)
}
foo1();
// 输出结果为:undefined、1、1000、2000、3000
// 解析:因为foo函数不是Promise函数,所以await只会将它作为一个返回值,不会阻塞后面的代码执行,所以刚开始的a是undefined,加不加await对这个函数的执行没有什么影响,三个定时器依旧按照等待时间长短先后执行。
function bar() {
console.log("bar function")
return new Promise(resolve => {
setTimeout(() => {
resolve(123)
}, 1000)
})
}
async function foo() {
console.log("-------")
// await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码
const res1 = await bar()
console.log("await后面的代码1:", res1)
const res2 = await bar()
console.log("await后面的代码2:", res2)
console.log("+++++++")
}
function foo1(){
return new Promise((resolve,reject)=> {
console.log(123321);
resolve('abc')
})
}
foo()
foo1().then(res=>console.log(res))
console.log(123);
// 输出结果:----、bar function、123321、123、abc、await后面的代码1:123、、bar function、await后面的代码2:123、++++++
// 解析:await修饰的Promise函数,所以在输出完-----后,遇到await就会去先执行Promise,输出bar function,代码被阻塞,输出foo1以及后面的代码,当后面代码执行完,开始执行async函数内代码
三. 常规结合起来使用方法
一般用于网络请求,不用再then回调,写法会更加美观
function requestData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('网络请求结果')
}, 2000);
})
}
async function getData() {
const res = await requestData()
console.log(res1)
}
getData()
特别注意
注意注意,async/await需要着重提一下,众所周知,async返回一个promise,而await声明的函数执行完毕之后,会产生一个微服务,但是await执行完之后直接跳出async,执行其他代码,执行完再回来,把后面的放入微服务队列,也就是一个阻塞await后面代码的过程。新版chorem其实是违规的优化了await,如果await后面跟的不是异步,那么会在遇到await之后直接把后面的代码放入微服务队列顶,这样执行完其他代码会先执行它再执行其他微任务(如上);而异步情况就不会直接放入队列,而是最后放。
两个题,注意await后面代码执行时机:
async function async1(){
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2(){
console.log('async2 end')
}
async1()
setTimeout(function(){
console.log('setTimeout')
},0)
new Promise(resolve=>{
console.log('Promise')
resolve()
}).then(()=>{
console.log('promise1')
})
.then(()=>{
console.log('promise2')
})
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
return Promise.resolve().then(()=>{
console.log('async2 end1')
})
}
async1()
setTimeout(function() {
console.log('setTimeout')
}, 0)
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')