ES7 结合node讲解async和await用法

程序员文章站 2022-06-15 14:47:27

...

async await 同步方式写异步代码

async

async 位于函数字面量或函数表达式的前面(普通函数、立即执行函数和箭头函数均可)，被修饰函数执行后会返回一个 Promise 对象。

async function chloe() {
    console.log("chloe");
    return 20;
}

等价于

function chloe() {
    return new Promise((resolve, reject) => {
        console.log("chloe");
        resolve(20);
    });
}

await

await 一定要位于 async 函数内部。否则报错
await 一般位于 Promise 对象之前，所以一般位于 async 函数执行的前面，但若是返回值为 Promise 对象的普通函数也可。
await 会拿到该对象的结果，也就是 then 中 resolve 或 reject 的参数。如果不是 Promise 对象，则直接返回对应的值。
若 await 后方不是 Promise 对象，则会将其用 Promise.resolve 包装后执行。
await 的执行会被强制等待至拿到结果，后续函数体内的代码执行被阻塞，函数本身不会阻塞整体代码。

await new Promise等同于 return new Promis

async function chloe() {
    console.log("chloe");
    return 20;
}

async function taran() {
    const age = await chloe(); chloe函数执行返回出一个Promise对象，await拿到该对象resolve的参数20，赋值给age
    console.log("taran" + age);
}

taran(); chloe taran20

async function chloe() {
    console.log("chloe");
    throw 18;
}

async function taran() {
    try {
        const age = await chloe(); chloe函数执行返回出一个Promise对象，await拿到该对象reject的参数18
        console.log("taran" + age); 不再执行
    } catch (error) {
        console.log("taran" + error); 捕获到错误信息18
    }
}

taran(); chloe taran18

当async函数执行的时候，一旦遇到await就会先返回，等到await的异步操作完成，再接着执行函数体内后面的语句。

async getAPI (value, ms) {
  await new Promise((resolve, reject) => {
    setTimeout(resolve, ms)
    console.log(ms)
  })
   console.log(value)
}
//执行
this.getAPI('hello', 1000)
console.log('虽然在后面，但是我先执行')
//打印
1000
虽然在后面，但是我先执行
间隔一秒打印    hello

也可以改成这种方法更明显

先执行await后面的函数，在执行async后面的函数

async getOne(ms) {
        await new Promise((resolve, reject) => {
          setTimeout(resolve, ms)
          console.log(ms)
        })
      },
async getAPI(value, ms) {
        await this.getOne(ms)
        return value
      }
// 执行
this.getAPI('hello', 1000).then((res) => {
  console.log(res)
})
console.log('虽然在后面，但是我先执行')
// 打印结果一样

node中用法如下一样

拿到结果再执行

ES7 结合node讲解async和await用法