JavaScript async 和 await 常见用法

一、async 函数修饰符

1. 用 async 修饰的函数立即执行后函数的返回值的是一个 promise 对象
2. 在 async 修饰的函数中可以返回 promise 对象，也可以返回普通值，返回普通值会被处理成 promise 对象

1. 新建 async.js

const p1 = (async () => {
  return 1;
})();
console.log(p1);

p1.then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
});

2. 终端执行

node async.js

3. 结果

Promise { 1 }
1

二、async 和 await 实现异步编程

async 常与 await 一起使用，实现异步编程，await 依赖于 async 必须和 async 一起使用（但是，async 可单独使用）

1. await 右侧表达式返回值

await 右侧的表达式返回的结果可以是普通值，也可以是 promise 对象（异步编程），如果是 promise 对象那么 await 修饰后返回的是 promise 对象的结果

1. 新建 await.js

const p1 = (() => {
  return 1;
})();
const p2 = (async () => {
  return new Promise((resolve, reject) => {
    const status = true;
    if (status) {
      resolve("p2 resolve");
    } else {
      reject("p2 reject");
    }
  });
})();

const p3 = async () => {
  console.log("p3 start");
  const p1V = await p1;
  console.log(p1V);
  const p2V = await p2;
  console.log(p2V);
  console.log("p3 end");
};
p3();

2. 终端执行

node await.js

3. 结果

p3 start
1
p2 resolve
p3 end

2. 单 await 实现异步编程

await 之上先执行，await 之下后执行

1. 新建 await.js

const p1 = (() => {
  return new Promise((resolve, reject) => {
    const status = true;
    if (status) {
      setTimeout(() => {
        resolve("resolve p1");
      }, 2000);
    } else {
      setTimeout(() => {
        reject("reject p1");
      }, 2000);
    }
  });
})();

const p2 = async () => {
  console.log("p2 start");

  const p1Res = await p1;
  console.log("p1Res", p1Res);

  console.log("p2 end");
};
p2();

2. 终端执行

node await.js

3. 结果

// 立即执行
p2 start

// 2s 后执行
p1Res resolve p1
p2 end

3. 多 await 实现异步编程

多个 await 是并行执行的，但是最终的结果输出顺序按照 await 实际使用的先后顺序输出

比如：p1、p2、p3 的执行事件分别是 2s、4s、1s，并行执行的结果是： 1s后得到p3结果、2s后得到p1结果、4s后得到p2结果
但是 await 实际使用的先后顺序是 p1>p2>p3，那么实际输出是：2s后得到p1结果，再过2s后同时得到p2和p3的结果（因为p3早在1s时就已经获得结果，所以p2执行完马上执行p3）

1. 新建 await.js

const p1 = (() => {
  return new Promise((resolve, reject) => {
    const status = true;
    if (status) {
      setTimeout(() => {
        resolve("resolve p1");
      }, 2000);
    } else {
      setTimeout(() => {
        reject("reject p1");
      }, 2000);
    }
  });
})();

const p2 = (() => {
  return new Promise((resolve, reject) => {
    const status = true;
    if (status) {
      setTimeout(() => {
        resolve("resolve p2");
      }, 4000);
    } else {
      setTimeout(() => {
        reject("reject p2");
      }, 4000);
    }
  });
})();

const p3 = (() => {
  return new Promise((resolve, reject) => {
    const status = true;
    if (status) {
      setTimeout(() => {
        resolve("resolve p3");
      }, 1000);
    } else {
      setTimeout(() => {
        reject("reject p3");
      }, 1000);
    }
  });
})();

const p4 = async () => {
  console.log("p4 start");

  const p1Res = await p1;
  console.log("p1Res", p1Res);

  await p2;
  console.log("p2 only await no data");

  const p3Res = await p3;
  console.log("p3Res", p3Res);

  console.log("p4 end");
};
p4();

2. 终端执行

node await.js

3. 结果

// 立即执行
p4 start

// 2s 后执行
p1Res resolve p1

// 再 2s 后执行
p2 only await no data
p3Res resolve p3
p4 end