一、async与await是什么?
async 是“异步”的意思,而 await 是等待的意思,await 用于等待一个异步任务执行完成的结果。
另外还有一个很有意思的语法规定,await 只能出现在 async 函数中。然后细心的朋友会产生一个疑问,如果 await 只能出现在 async 函数中,那这个 async 函数应该怎么调用?
二、使用步骤
我们只需要在函数前声明async表明这个函数是一个异步函数操作,那我们的await是起到什么作用呢?让我们往下走。
假设我们的定时器函数就是请求数据的时间,我们想要在ajax1,ajax2函数里面拿到接口数据并且在控制台输出,但async用于申明一个function是异步的,通俗来说就是谁跑得快谁先输出。我们从active1中请求数据需要两秒的时间,但active2中请求数据控制台输出只需要一秒,那在这时我们控制台将会先输出ajax2再输出ajax1。
但是我们的业务要求是等ajax1函数执行完再执行ajax2函数,那为了解决这个问题,我们的await就派上用场了,我们只需要在调用函数前加上await
async function call() {
let res1 = await ajax1()
let res2 = await ajax2()
}
这时我们的的异步请求就能像同步一样,按照我们的调用顺序执行。
三、捕获异常
方法一:
async function 方法名(){
try{
//代码正常运行
}catch{
console.log("捕获的错误")
}
}
在调用的函数中使用reject抛出异常然后在catch中捕获异常并且输出在控制台。
方法二:
由于我们调用返回的函数是一个promise对象,所以我们可以在方法调用后.then().catch()捕获异常
call().then(res => {
console.log(res);
}).catch(err => {
console.err(err);
})
我们一样是可以在catch中捕获到reject抛出的错误信息
总结:
await 优势在于处理 then 链,使代码看起来像同步代码一样能够按照我们调用的顺序执行并且也能够通过try/catch来捕获错误。还有一个小细节async/await打包后
的代码其实会比 promise
复杂很多, 当然这个是一个忽略不计得问题。