async/await的使用方法
1.async的基本形式和用法
首先看一个基本写法：
async function demoFunc () {
return new Promise((resolve, reject) => {
resolve('hello world')
})
}
async 写在函数前，返回一个Promise对象
- 当返回值不是一个
promise对象时，会被强转成promise对象
async function asyncFunc () {
return 'hello world'
}
通过控制台 可以看到，返回了一个Promise
image.png
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()处理。
目前看不出我们的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秒
image.png
（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}`)
}
image.png
可以明显感觉到输出间隔1秒 3秒 6秒
最后输出7是因为我们的6在step3内getTime(6000)加1000ms变成7000
这个时候感觉到async/await的便捷之处了吗？一个是繁琐的链式写法，调用和用阅读性较差，而使用async/await，让代码如同步代码般顺畅丝滑。除了写法方便，不知道大家发现了没，我们的参数可以直接调用,这个的方便之处不是简单的promise链式调用可以媲美的。
转载自本人思否：超人思否
