1.async的基本形式和用法
首先看一个基本写法:
async function demoFunc () {
return new Promise((resolve, reject) => {
resolve('hello world')
})
}
async 写在函数前,返回一个Promise对象
- 当返回值不是一个promise对象时,会被强转成promise对象
async function asyncFunc () {
return 'hello world'
}
通过控制台 可以看到,返回了一个Promise
2.await
await操作只能用在async函数中,否则会报错。
arg = await awaitFunc
awaitFunc可以是任何值,通常是一个promise
3.async和await基本使用
写一个函数,返回promise对象,该函数会在2s后输出参数信息
function printName(name) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(name)
}, 2000)
} )
}
然后再写一个async函数,此时就可以用上我们的await关键字,因为await后通常放的是一个promise对象,所以可以写上以上的调用
async function getName() {
let name = await printName('jack')
console.log('hello ', name)
}
getName() // 2s后 输出hello jack
代码的执行过程是调用了getName方法,遇到了await,await表示代码在这里暂停了,不再向下执行,等待promise对象执行完毕,拿到promise resolve的值并返回后,再继续向下执行。
- 若此时promise对象抛出了错误呢?
我们可以用try catch
function printName(name) {
return new Promise((resolve, reject) => {
setTimeout(() => {
throw new Error('出错了') // 模拟报错
resolve(name)
}, 2000)
} )
}
async function getName () {
try {
let name = await printName('jack')
console.log('hello ', name)
} catch (err) {
console.log(err, ' 被catch抓到啦')
}
}
getName() // 控制台输出 出错了 被catch抓到啦
也可以使用promise的.then() .catch()表达式,等价为
function printName(name) {
return new Promise((resolve, reject) => {
setTimeout(() => {
throw new Error('出错了') // 模拟报错
resolve(name)
}, 2000)
} )
}
async function getName () {
let name = await printName('jack')
return name
}
// 因为在最前面我们就知道,async返回的是一个promise对象,此处的getName其实也就是一个promise对象
getName().then((name)=> {
console.log('hello ', name)
}).catch((err) => {
console.log(err, ' 被catch抓到啦')
}) // 会进入catch
目前看不出我们的async和await有什么妙用。让我们来多写几个,妙用初体验
async function getName() {
let name1 = await printName('Jack')
let name2 = await printName('Bob')
let name3 = await printName('Cindy')
console.log('hello ', name1, ' ', name2, ' ', name3)
}
getName() // 6s后输出 hello Jack Bob Cindy
有没有感觉自己在写正常的同步代码了?爽吗?还可以更爽,我们继续看例子
现在要求使用promise写一个函数,要求第一步消耗1秒,第二步消耗2秒,第三步消耗3秒,总时间是1+2+3一共6秒,我们看看promise的链式写法
function getTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 1000), n)
})
}
function step1(n) {
console.log(`步骤1消耗${n}秒`)
return getTime(n)
}
function step2(n) {
console.log(`步骤2消耗${n}秒`)
return getTime(n)
}
function step3(n) {
console.log(`步骤3消耗${n}秒}`)
return getTime(n)
}
// promise链式写法
function doThis() {
const time1 = 1000
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(retult => {
console.log('retult is ', retult)
})
}
// async函数写法
async function doThis() {
const time1 = 1000
const time2 = await step1(time1)
const time3 = await step2(time2)
const result = await step3(time3)
console.log(`result is, ${result}`)
}
doThis()
看看运行结果,输出的时间间隔可以感受到是1秒,2秒,3秒
(ps:result is 4000 是因为3000+1000)
有没有感觉不用跟繁琐的链式打交道了。其实需求一变的话,会更明显。如果我们需求第一步 第二步 第三步分布别为1秒2秒3秒不变。追加需求,第二步需要加上第一步的时间,第三步要加第二步的时间,即第一步1秒,第二步1+2=3秒,第三步3+3=6秒,一共9秒,我们先看看链式写法
function step1(n) {
console.log(`步骤1消耗${n}秒`)
return getTime(n);
}
function step2(m, n) {
console.log(`步骤2消耗${m} and ${n}秒`);
return getTime(n);
}
function step3(k, m, n) {
console.log(`步骤3消耗${k}, ${m} and ${n}秒`)
return getTime(k + m + n);
}
// Promise方式调用
function doThis() {
const time1 = 1000
step1(time1)
.then(time2 => {
return step2(time1, time2)
.then(time3 => [time1, time2, time3]);
})
.then(times => {
const [time1, time2, time3] = times;
return step3(time1, time2, time3);
})
.then(result => {
console.log(`result is ${result}`)
});
}
// async/await方式调用
async function doThis() {
const time1 = 1000
const time2 = await step1(time1)
const time3 = await step2(time1, time2)
const result = await step3(time1, time2, time3)
console.log(`result is ${result}`)
}
可以明显感觉到输出间隔1秒 3秒 6秒
最后输出7是因为我们的6在step3内getTime(6000)加1000ms变成7000
这个时候感觉到async/await的便捷之处了吗?一个是繁琐的链式写法,调试的时候调用体验极差,而使用async/await,让代码如同步代码般顺畅丝滑。除了写法方便,不知道大家发现了没,我们的参数可以直接调用,这个的方便之处不是简单的promise链式调用可以媲美的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。