浅谈Generator函数的异步应用之async函数

时间:2021-6-7 作者:qvyue
1.异步编程的终极解决方案

    前文结尾时提到,async/await是异步编程的’终极’解决方案,而终极二字就体现在,使用async/await来操作异步无论是逻辑上还是语义上都与同步操作无限接近(当然只是形式上像,没有改变异步的本质,后面会解释)。
    先来看一下之前使用Generator函数控制异步流程的代码

function* gen() {
  const res1 = yield promisify_readFile("./text1.txt");
  console.log(res1.toString());
  const res2 = yield promisify_readFile("./text2.txt");
  console.log(res2.toString());
}
co(gen);

    下面使用async/await实现

async function asyncReadFile() {
  const res1 = await promisify_readFile("./text1.txt");
  console.log(res1.toString());
  const res2 = await promisify_readFile("./text2.txt");
  console.log(res2.toString());
}
asyncReadFile()

    可以看到,从形式上看使用async/await进行异步流程处理无需执行器,函数可以像普通函数一样执行,这意味着async函数内置了Generator函数的执行器。从语义上看,async关键字表示函数内部有异步操作,await关键字表示要等待异步操作执行完毕,相比于Generator函数用*声明以及yield表达式划分状态要更加友好。
    下面具体介绍async函数和await关键字的特点。

2.async函数和await关键字的特点
2.1 async函数返回值

    async函数返回的是Promise对象,因此可以为async函数指定then,catch等方法。

asyncReadFile().then(() => {
  console.log("end");
});

    既然async函数返回的是Promise对象,那其结果和状态由什么决定呢

  • 当async函数内部的return有返回值时,该参数会成为then方法成功回调的参数(即Promise的结果值),状态变为成功。
const promisifyTimeOut = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('timeOut')
    }, 500);
  })
}
const asyncTimeOut = async () => {
  const res = await promisifyTimeOut()
  return res
};
asyncTimeOut().then(
  (res) => {
    console.log('success' + res);
  },
  (r) => {
    console.log('err' + r);
  }
);
//success timeOut
  • 当async函数内部抛出错误时,状态会立即变为失败,并执行then方法的失败回调或catch方法。
const asyncTimeOut = async () => {
  const res = await promisifyTimeOut()
  throw res
};
asyncTimeOut().then(
  (res) => {
    console.log('success' + res);
  },
  (r) => {
    console.log('err' + r);
  }
);
// err timeOut

    利用这一点可以,我们可以进行对async函数的错误处理,后面会介绍。

2.2 await关键字的特点
  • await命令只能用在async函数之中,用在普通函数中会报错。
  • await命令后面如果是一个 Promise 对象,返回该Promise 对象的结果值,如果不是 Promise 对象,就直接返回对应的值 。
(async function(){
    const res1 = await Promise.resolve('foo')
    console.log(res1)
    const res2 = await 'bar'
    console.log(res2)
})()
// foo
// bar
3.async函数的错误处理

    前面提到,async函数内部抛出错误时,其状态会立即变为失败并执行失败回调(假设指定了失败回调)。因此任何一个await关键字后面的Promise状态变为rejected都会导致async函数立即中断执行。

const promisifyTimeOut = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("some err");
    }, 500);
  });
};
const asyncTimeOut = async () => {
  await promisifyTimeOut();
  console.log("foo");
};
asyncTimeOut().catch((r) => console.log(r));
// some err

    上面代码,await后的异步抛出错误,async函数中断执行导致foo没有被打印。如果不想让async函数内部一抛出错误就终止执行,可以将可能抛出错误的Promise包在try…catch代码块中 ,或者为可能抛出错误的Promise指定失败回调(指定then方法或catch方法),下面以try…catch为例演示。

const asyncTimeOut = async () => {
  try {
    await promisifyTimeOut()
  } catch (error) {
    console.log(error)
  }
  console.log("foo");
};
asyncTimeOut().catch((r) => console.log(r))
// some err
// foo

    如果使用上述两种方法进行错误处理,则async函数指定的失败回调将不生效(假设不在catch语句或Promise失败回调中将错误抛出)。另外,多个await语句可以一起包在try…catch中进行统一错误处理。

4.async函数的实现原理

    其实,经过前面对co模块的讨论,以及上面对async函数特点的介绍,我们可以知道,async/await就是Generator函数的语法糖,我们只需根据其特点进行封装,具体如下。

  • async函数内置Generator函数执行器。
  • async函数返回Promise,要等内部所有Promise执行完后再改变状态,函数内部抛出错误,状态立即变为rejected。

    我们假设async的内置执行器叫做spawn函数,那么async函数的结构就是这样的

const async = (gen) => {
  return () => {
    return spawn(gen);
  };
};

    接下来实现执行器,其原理与前面讨论的co模块基本一致

function spawn(genF) {
  return new Promise(function (resolve, reject) {
    const gen = genF();
    function step(data) {
      let res;
      try {
        res = gen.next(data);
      } catch (e) {
        // 内部抛出错误 状态变为rejet
        return reject(e);
      }
      if (res.done) {
        return resolve(res.value);
      }
      // 为异步指定成功/失败回调 成功则继续执行 失败则立即rejected
      Promise.resolve(res.value).then(step, (r) => reject(r));
    }
    step();
  });
}

下面简单测试一下

const promisify = (data) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(data);
    }, 300);
  });
};

function* testGen() {
  const res1 = yield promisify(1);
  console.log(res1);
  const res2 = yield promisify(2);
  console.log(res2);
  return res2;
}

const async = (gen) => {
  return () => {
    return spawn(gen);
  };
};
// 得到async函数
const asyncFoo = async(testGen);
// 得到async函数的执行结果
const res = asyncFoo();
setTimeout(() => {
  console.log(res);
}, 1000);
// 1
// 2
// Promise { 2 }
5.async函数与执行环境栈

    在前面对JavaScript执行上下文的讨论时我们知道,JavaScript引擎在执行代码之前, 会创建一个执行环境栈,之后创建全局执行上下文并将它压入栈中作为栈底。每遇到一个函数执行时,都会为该函数创建执行上下文,并将其推入执行环境栈中,形成一个由执行上下文构成的堆栈(context stack)。每个上下文都有一个与之相关联的变量对象,包含了当前上下文的变量,函数,形参等。栈是“后进先出”的数据结构,因此最后产生的上下文环境首先执行完成并出栈,然后再执行它下层的上下文,栈底永远是全局上下文,当浏览器窗口关闭,全局上下文才会出栈。
    Generator函数不是这样,执行Generator函数产生的上下文,遇到yield命令时,会暂时退出堆栈,但是并不消失,变量对象里面的所有变量和对象会冻结在当前状态。等到执行next命令时,执行上下文会重新加入执行环境栈,冻结的变量和对象恢复执行。而async函数是Generator函数的语法糖,因此他也有一样的特性,即async 函数可以保留运行堆栈。
    下面用一个例子进行对比说明

const timeOut = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
};
(function () {
  for (let i = 0; i  {
      console.log(i);
    });
  }
  console.log("end");
})();
// end
// 0 1 2

    上面代码会先打印end 之后012几乎同时打印,原因不难分析,由于promise.then方法不会将当前上下文冻结,因此循环的进行不受影响,而因为then方法中的回调会异步执行,因此三个log语句会几乎同时被加入任务队列,最终造成上述的执行结果。
    下面用async/await重写上面代码

(async function () {
  for (let i = 0; i 

    上面代码会依次打印0 1 2 end。
    分析原因,由于async 函数可以保留当前上下文环境,当遇到await命令,当前上下文的所有状态都被冻结,包括for循环在内的所有代码都会暂停执行,因此造成上述执行结果。
    其实,这条特性可以理解为, await命令后面的所有代码都会进入异步任务队列。 await相当于then的语法糖,其后面的代码都进入了promise.then的回调函数中,会进入任务队列异步执行。
    利用这一点,我们可以实现休眠器。

function sleep(interval) {
  return new Promise((resolve) => {
    setTimeout(resolve, interval);
  });
}
// 用法
async function Async(timeOut) {
  await sleep(timeOut);
  console.log("foo!");
}
Async(1000);
// 一秒后打印foo!

    关于上述特性,有两点需要说明

    1.await语句冻结的只是async函数的上下文,即async函数后面的代码执行不会被阻塞。这也就说明,async/await只是写起来像同步代码,异步的本质没有改变。

async function Async(timeOut) {
  await sleep(timeOut);
  console.log("foo!");
}
Async(0)
console.log('end!')
// end!
// foo!

    2. 上面说到,遇到await关键字,其后所有代码都将被冻结,因此await语句下面的异步任务也会等到await语句的异步结束后再执行。这点对于具有依赖关系的异步(继发关系)的处理是非常友好的。但同样的,如果两个异步没有继发关系,则尽量不要这么写,因为会造成阻塞。可以使用Promise.all()等方式让他们并发执行,而不是继发执行。

function sleep(interval) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("foo!");
      resolve();
    }, interval);
  });
}
async function Async() {
  await Promise.all([sleep(500), sleep(500)]);
  console.log("end");
}
Async();
// 两个异步并发执行 几乎同时打印foo!
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。