async-await

2022-05-15 117

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 首先说明 async/await语法属于ES7,不过到现在就算是es6也还算是新技术吧,技术迭代比较慢

1. 前言

首先说明 async/await语法属于ES7,不过到现在就算是es6也还算是新技术吧,技术迭代比较慢

2. 是什么 what

1.async/await语法通常结合promise使用

2.也就是说也是用同步的方式来写异步代码

3.async 是异步的意思用来声明一个 function是异步的

4.await 是 async wait 异步等待 ,就是等待一个异步函数执行完成

规定await只能出现在async函数中

3. async基础

3.1 demo

async function testAsy() {
            return "hello  asy"
        }
        const result = testAsy()
        console.log("result:",result);

3.2 结果

3.3 分析

打印的结果并不是 return的字符串

返回的是个promise,所以我们需要通过then来脱壳取值

3.4 取值

async function testAsy() {
            return "hello  asy"
        }
        testAsy().then(res=>{
            console.log("Res:",res);
        })
        console.log("result后面,但是先执行");

3.5结果

3.6 分析

async 修饰的函数是异步函数

async内部给函数包了一层Promise.resolve()

4. reject实现

既然有resolve 那肯定也有 reject

4.1 代码

async function testAsy(flag) {
            if(flag){
                return "hello  asy"
            }else{
                throw '抛出异常'
            }
        }
        console.log(testAsy(true));//Promise.resolve()
console.log(testAsy(false));//Promise.reject()

4.2 结果

5. catch

5.1 代码

async function testAsy(flag) {
            if(flag){
                return "hello  asy"
            }else{
                throw '抛出异常'
            }
        }
        testAsy(false).then(res=>{
            console.log("Res:",res);
        }).catch(err=>{
            console.log("捕获错误:",err);
        })

5.2 结果

$_L$D~DME{(99VBEOV$M7W@Y.png$

还是通过 promise的 catch来进行错误捕获

6. await catch

1.async wait 异步等待 ,等待什么呢

后面可以根任何表达式

6.1 代码

function testWait() {
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve("测试wait")
                },1000)
            })
        }
        async function test() {
          const r1 = await testAsy(true)
          console.log("结果 wait:",r1);
            const r2 = await testWait()
            console.log("结果 wait:",r2);
        }
        test()

6.2 分析

1.testWait()本身就是返回的promise,异步的,所以不需要加async

2.使用async/await语法对比

3.await放置在Promise调用之前，await强制等待后面代码执行，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果

4.await只能在async函数内部使用,用在普通函数里就会报错

6.3 then处理

await直接脱掉了一层then的壳比较方便

6.4 catch

function testWait() {
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve("测试wait")
                },1000)
            })
        }
        async function test() {
            const r1 = await testAsy(true)
            console.log("结果 wait:",r1);
            const r2 = await testWait()
            console.log("结果 wait:",r2);
          try{
            let res3 =   await testAsy(false)
            console.log("结果-3:",res3)
             } catch(error){
            console.log("-------",error)
           }
        }
        test()

其实就是结合 try{}catch{}来搞

7.react 使用

async  componentDidMount(){
     try{
        let res1 =   await  axios.get("/v1/use?type=1")
        console.log("结果:",res1)
     } catch(error){
        console.log("-------",error)
     }

8. vue3 使用

async created() {
  this.characters = (await getList()).data
}

9. 扩展下规范的几个阶段

1.编辑草案 Editor's Draft (ED)

2.工作草案 Working Draft (WD)

3.过渡－最后通告工作草案 Transition – Last Call Working Draft (LCWD)

4.候选推荐标准 Candidate Recommendation (CR)

5.过渡－建议推荐标准 Transition – Proposed 6.Recommendations (PR)

7.推荐标准 Recommendation (REC)