浅谈async await用法

前言

• 上几篇文章更完了promise 今天一起来看看async await异步操作的使用与理解

async await理解

• async和await用更简洁的方式写出基于promise的异步行为

• async 函数成功 使用示例
  • 创建一个成功的函数 返回为1的结果
  • 执行函数并打印 返回值为promise对象

        const fn = async () => {
            return 1
        }
        /*
        fn 函数等价于
        const fn = async () => {
            return Promise.resolve(1)
        }
        */ 
        
        const result = fn()
        console.log(result)

• async 函数失败 使用示例
  • 创建一个失败函数 向浏览器抛出错误为3
  • 获取变量为result的promise对象，用链式调用获取错误

        const fn = async () => {
            throw 3
        }
         /*
        fn 函数等价于
        const fn = async () => {
            return Promise.reject(3)
        }
        */ 
        const result = fn()
        result.then(
            value => { console.log('onResolved', value) },
            reason => { console.log('onRjected', reason) }
        )

• await 右侧表达式为成功promise示例
  • fn函数返回了成功promise
  • 使用await可以避免使用then直接获取成功值

        const fn = () => {
            return Promise.resolve(1)
        }

        const fn2 = async () => {
            let value = await fn()
            console.log(value)
        }

        fn2()

• awiat 右侧为失败promise示例
  • fn函数返回了失败的promise
  • awiat获取不到失败结果 需要用try catch语法获取

        const fn = () => {
            return Promise.reject(1)
        }
        const fn2 = async () => {
            try {
                let value = await fn()
            } catch (error) {
                console.log(error)
            }
        }

        fn2()

• await 右侧不是promise示例
  • 得到的结果就是返回的值

        const fn = () => {
            return 6
        }
        const fn2 = async () => {
            let value = await fn()
            console.log(value)
        }
        fn2()

使用进阶

• 以下这段代码value值为6
• 注意:fn()此时的结果为promise对象 await直接获取成功结果
• async函数返回的一定是一个promise对象

        const fn = async () => {
            return 6
        }
        const fn2 = async () => {
            let value = await fn()
            console.log(value)
        }
        fn2()

总结

• async与await一般搭配使用 async函数里可以没有await
• 今日份小知识get~