【JS】async 与 await

112 阅读1分钟

一、作用

异步操作的同步编程 —— 即等待多个异步操作的结果返回(无论成功或失败),才继续往下执行

二、注意点

1. asyncawait 要配合使用

2. async 用于声明这个函数里面有异步操作

3. await 后面接的
    a. 如果不是 Promsie 对象,那 await 表达式的运算结果就是它等到的东西
    b. 如果是 Promise 对象,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果
    值得注意的是:它并不处理 reject 的结果,需要另外作单独的处理

三、处理失败的两种方式

方式一

在函数内部用 try-catch 直接处理错误

async function getData(){
    try {
        var res1 = await ajax('http://...')
        var res2 = await ajax('http://...')
    } catch(error) {
        console.log(error)
    }
}

getData()

方式二

返回一个 Promise 对象,用 then 和 catch 分别处理成功和失败的结果

async function getData(){
    var res1 = await ajax('http://...')
    var res2 = await ajax('http://...')
    return res2
}

getData()
.then(res => {...})
.catch(err => {...})

四、相比 Promise 的优势

1. 读起来比较同步:Promise 是链式调用写法,读起来会加重阅读负担
2. 写起来比较同步:Promise 传递中间值比较麻烦,而 async-await 几乎是同步的写法
3. 错误处理较友好:Promise 异常捕获非常冗余,而 async-await 可以用成熟的 try-catch 捕获异常
4. 调试友好:Promise 的调试很差,由于没有代码块,你不能在⼀个返回表达式的箭头函数中设置断点,如果你在⼀个.then代码块中使⽤调试器的步进(step-over)功能,调试器并不会进⼊后续的.then代码块,因为调试器只能跟踪同步代码的每⼀步。