1.Async Await 原理(注:await 只能出现在 async 函数中)

  1. 当调用一个 async 函数时,会返回一个 Promise 对象 (关键)
  2. async 函数中可能会有 await 表达式,await表达式 会使 async 函数暂停执行,直到表达式中的Promise解析完成后继续执行 async 中 await 后面的代码并返回解决结果。
  3. 既然返回的是Promise 对象,所以在最外层不能直接获取其返回值,那么肯定可以用原来的方式:then() 链来处理这个 Promise 对象

原理:
async/await 函数其实就是一种语法糖
async/await 是基于promise实现的,async 函数其实就是把 promise 做了一个包装
await 返回值是一个 Promise 对象,它只是把 await 后面的代码放到了 Promise.then()

2. async awiat 的基本语法

// 当调用一个 async 函数时,会返回一个 Promise 对象 (关键)
// async/await 出现的异常是无法捕获的,需要借助 try/catch 来捕获异常
function sleep(flag) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(flag){
                resolve('success')
            }else{
                reject('Error')
            }
        }, 2000)
    })
}

// async await 的用法
async function fn(flag) {
    try {
        let result = await sleep(flag)
        return result
    } catch (err) {
        return err
    }
}
// 返回的 a,b 是一个 promise 对象
var a = fn(true)
var b = fn(false)
a.then((res)=>{
    console.log(res) // success
})
b.then((res)=>{
    console.log(res) // Error
})

3.async await 和 promise 的区别

  1. async/await 出现的异常是无法捕获的,需要借助 try/catch 来捕获异常
  2. 任何一个await后面的promise对象变为reject,那么整个async都会被中断
  3. 使用 async await 的话,catch 能处理 JSON.parse 错误
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐