JavaScript async/await 基础使用

一、async/awiat的使用规则:

• async 表示这是一个async函数， await只能用在async函数里面，不能单独使用
• async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行
• await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

 

二、async/await的特点

• Async作为关键字放在函数前面，普通函数变成了异步函数
• 异步函数async函数调用，跟普通函数调用方式一样。在一个函数前面加上async，变成 async函数，异步函数，return:1，打印返回值，
• 返回的是
  promise成功的对象
• Async函数配合await关键字使用

 

三、asycn/await 使用案例

1.async 函数的返回值，是promise 对象

        //async 函数的返回值 是Promise对象/任务对象
        let asyncFun=async function (){
            return 1;
        }
        console.info(asyncFun);//不是返回的数字1

2.async 搭载Promise 使用场景

      //使用场景
      //摇色子方法
      function dice() {
        return new Promise((resolve, reject) => {
          let sino = parseInt(Math.random() * 6 + 1); //生成一个1~6之间的随机小数
          setTimeout(() => {
            resolve(sino);
          }, 2000);
        });
      }
      //异步方法
      async function text() {
        let n = await dice();
        //await 关键字后面调用摇色子方法执行完毕之后，才进行变量赋值
        console.log("摇出来" + n); //最后打印出摇出来的数
      }
      text();

 

3. async 搭载 Promise 实现 ajax请求的依次执行

        var numlist = [1, 2,3, 4, 5];
        //使用Promise解决，执行顺序问题
        function addString(num) {
            return new Promise(function (resolve, reject) {
                $.get('/ajax/addstring', { num }, res => {
                    console.info(res);
                    resolve();
                });
            });
        }

        async function doAll() {
            //var temp = await addString(1);//等待异步代码
            //console.info('--a');
            //await addString(2);//等待异步代码
            //console.info('--b');

            //使用循环任务，依次执行
            for (var i = 0; i < numlist.length; i++) {
                var item = numlist[i];
                await addString(item);
            }
        }
        doAll();

 

 

四、async/await的优点

1. 方便级联调用：即调用依次发生的场景；
2. 同步代码编写方式:Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；

3. 多个参数传递:Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作；

4. 同步代码和异步代码可以一起编写:使用Promise的时候最好将同步代码和异步代码放在不同的then节点中，这样结构更加清晰；async/await整个书写习惯都是同步的，不需要纠结同步和异步的区别，当然，异步过程需要包装成一个Promise对象放在await关键字后面；
5. 基于协程:Promise是根据函数式编程的范式，对异步过程进行了一层封装，async/await基于协程的机制，是真正的“保存上下文，控制权切换……控制权恢复，取回上下文”这种机制，是对异步过程更精确的一种描述；
6. async/await是对Promise的优化:async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法

 

 

更多：

C# 异步编程Task(三) async、await

JavaScript Promise 对象使用讲解

C# 异步编程Task整理（一）