ES6 标准引入了 async 函数 彻底解决回调嵌套

async函数

ES2017 标准引入了 async 函数，它是一个关键字，被async修饰的函数称为async函数。

作用：async也是处理异步的，它是对Promise的一种扩展，让异步更加方便，彻底解决回调嵌套 

（关于Promise可以查看上一篇）

https://blog.csdn.net/qq_64389035/article/details/121776591?spm=1001.2014.3001.5502

async函数是异步编程解决方案之一，它是以同步流程表达异步操作； 

async的特点：

1)、async可以单独使用；

2)、被async修饰过的函数调用后返回的是Promise对象；

await的特点：

1)、await不能单独使用，必须要与async一起使用；

2)、await通常等待的是Promise的结果，对于Promise成功时回调函数的结果可以直接处理，对于Promise失败时回调函数的结果不能直接处理，解决办法有两种：

第一种：在Promise对象的catch()方法中定义失败时的回调函数，

代码如下：

<script>

        function mytest() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                 
                    if (0) {
                        resolve('Hello WEB');
                    } else {
                        reject('出错了');
                    }

                }, 3000);
            });
        }


        async function myfn() {
            console.log('开始执行');
            let d = await mytest().catch(err => {
                console.log(`失败原因：${err}`);
            });
            console.log(`完成:${d}`);
        }

        myfn();
    </script>

 结果如下：

 第二种：在Promise内部不管执行成功还是失败都调用成功时的回调(resolve())，并通过成功时回调函数传一个数组作为对应await语句的结果，（应用较多） 代码如下：

    <script>

     
               function mytest() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    if (1) {
                        //if (0) {
                        resolve([true, 'Hello WEB']);
                    } else {
                        // reject('出错了');
                        resolve([false, '出错了']);
                    }

                }, 3000);
            });
        }


        async function myfn() {
            console.log('开始执行');
          
            let [flg, d] = await mytest();
            if (flg) { //成功
                console.log(`完成:${d}`);
            } else {
                console.log(`失败：${d}`);
            }

        }

        myfn();
    </script>

结果如下：

async函数基本用法

注意：async函数返回的也是一个promise对象

async函数语法：

// 一般写法
async function name( ){
	let res1 = await promise异步1
	let res2 = await promise异步2
    ...
}

// 箭头函数写法
async ()=>{
   let res1 =  await promise异步1
   let res2 =  await promise异步2
   ...
}
   
// 在对象里面的写法

{
    async fn(){
          let res1 =  await promise异步1
  		  let res2 =  await promise异步2
   		  ...
    }
}
   
// 点击函数写法
bnt.onclick = async ()=>{
      let res1 =  await promise异步1
  	  let res2 =  await promise异步2
   	  ...
}

应用

   使用async函数把promise的异步变成真正的同步代码

代码案例：

  <script>
       
 
    function mytest(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                if(1){
                    resolve([true,'nihao']);

                }else{
                    resolve([false,'出错了'])
                }
            },3000);
        })
    }
    async function myfn(){
        console.log('开始执行');
       let[flg,d]=await mytest();
       if(flg){
        console.log(`完成:${d}`);
       } else {
                console.log(`失败：${d}`);
            }
    }
      myfn()
         
         </script>

输出结果：

 下一章：

模块化封装数据库