async await的基本使用

async await的使用

自我记录

MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

一. async 函数

函数返回值为promise 对象
promise 对象的结果 由async函数执行的返回值决定

async function main() {
     // 1.如果返回值 是一个非Promise类型的数据
     // 返回的结果就是 一个成功的 Promise 对象 PromiseState状态 fulfilled
     // 并且return 什么 PromiseResult 结果就是什么
     // return 'abc'

     // 2.如果返回值 是一个Promise类型的数据
     // 返回的结果就是 Promise 结果的状态
     // return new Promise((resolve, reject) => {
     //     // resolve('成功')
     //     reject('失败')
     // })

     // 3.如果抛出异常
     // 状态就是一个失败的Promise对象 结果就是 抛出的结果
     throw 'err'
 }
 let res =  main()
 console.log(res);

二.await 表达式

1.await 右侧表达式一般为 promise 对象,但也可以是其他的值
2.如果表达式是 promise 对象, await 返回的是 promise成功的值
3.如果表达式是其它值,直接将此值作为await 的返回值

async function main() {
    let p = new Promise((resolve, reject) => {
        resolve('成功')
    })
    // 1.右侧为promise的情况
    let res = await p
    console.log(res); // 打印   成功

    // 2.右侧为其它类型的数据 一般很少见
    let res2 = await 'abc'
    console.log(res2); // 打印  abc   
}
main()

三.注意

await 必须写在 async函数中, 但async函数中可以没有 await
如果await 的promise 失败了,就会抛出异常,需要通过 try…catch 捕获处理

async function main() {
    let p = new Promise((resolve, reject) => {
        reject('err')
    })
    try {
        let res3 = await p
        console.log(res3);
    } catch(e) {
        console.log(e); // 打印 err
    } finally{
        // 补充知识点 finally 无论成功失败都会执行
        console.log('无论成功失败 我都会执行!');
    }
}
main()