[JavaScript知识库]javascript async awit 和 Promise 概述

async awit概述

async函数可能包含0个或者多个await表达式。await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。使用async / await关键字就可以在异步代码中使用普通的try / catch代码块。

await关键字只在async函数内有效。如果你在async函数体之外使用它，就会抛出语法错误 SyntaxError 。

async/await的目的为了简化使用基于promise的API时所需的语法。async/await的行为就好像搭配使用了生成器和promise。

async awit 示例

简单示例

//例如，如下代码:

async function foo() {
   return 1
}
//等价于:

function foo() {
   return Promise.resolve(1)
}

try cathc 示例

//例如，如下代码:
  const tryDemo = async () => {
    try {
      return '成功';
    } catch (error) {
      return '错误';
    }
  };
//等价于:
  const promiseDemo = () => {
    return new Promise((resolve, reject) => {
      if (1 < 2) {
        resolve('成功');
      } else {
        reject('失败');
      }
    });

Promise 概述

首先它是异步的。使用Promise可以让我们书写的代码，更具符合我们常人的逻辑。就像用电饭煲煮饭一样。第一步：要先把米倒入锅中；第二步：往锅中加水；第三步：关上盖子；第四步：插上电源：第五步：点击按钮开始煮饭。

基础用法

  /**
   * 将米倒入锅中
   * @returns
   */
  const daomi = () => {
    return new Promise((resolve, reject) => {
      if (1 < 2) {
        resolve('将米倒入锅中---成功');
      } else {
        reject('将米倒入锅中---失败');
      }
    });
  };

  /**
   * 将水倒入锅中
   * @returns
   */
  const daoshui = () => {
    return new Promise((resolve, reject) => {
      if (1 < 2) {
        resolve('将水倒入锅中--成功');
      } else {
        reject('将水倒入锅中--失败');
      }
    });
  };

  /**
   * 开始煮饭煮饭
   */
  const zhufan = () => {
    //第一步 倒米
    daomi()
      .then((res) => {
        console.log(res); //将米倒入锅中---成功
        //第二步 倒水
        daoshui()
          .then((r) => {
            console.log(r); //倒水成功
          })
          .catch((e) => {
            console.log(e); //倒水失败
          });
      })
      .catch((err) => {
        console.log(err);
        //将米倒入锅中---失败
      });
  };

Promise.all 用法

• 概述

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。说人话就是，使用Promise.all你可以一次性获取多个异步操作的返回结果。

• 写法1

// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function(id){
  return getJSON("/post/" + id + ".json");
});
 
Promise.all(promises).then(function(posts) {
  // ...  
}).catch(function(reason){
  // ...
});

• 写法2

    let fileList = [1, 2, 3, 4];
    let promiseArr: any[] = [];
    fileList.forEach((item, index) => {
      promiseArr.push(
        new Promise((resolve, reject) => {
          //注意：内部不能只能直接引用异步方法,过度封装异步方法，会导致Promis.all 无法获取到返回的集合
          setTimeout(() => {
            resolve(item); //代码正常执行！
          }, 1000);
        })
      );
    });

    Promise.all(promiseArr).then(res=>{
      console.log(res) // [1, 2, 3, 4]
    });

小技巧

    Promise.resolve("成功")
    Promise.reject("失败")

问题

Promise.all 数组里面的promise 是如何执行的呢？是并发执行呢？还是以队列的形式，必须要等前一个promise执行完成后，才会执行下一个？希望有大佬来回答下。

我的回答：JS引擎是基于事件驱动，采用的是单线程运行机制。即JS引擎会只会顺序的从任务列表中取任务，并执行。

参考

MDN async awit
菜鸟Promise

JavaScript线程机制