美文网首页
async 函数

async 函数

作者: 木中木 | 来源:发表于2017-12-05 09:08 被阅读0次

async 函数是什么?一句话,它就是 Generator 函数的语法糖。
一比较就会发现,async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。

async函数对 Generator 函数的改进,体现在以下四点。

(1)内置执行器。

Generator 函数的执行必须靠执行器,所以才有了co模块,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行。

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

(2)更好的语义。

async和await,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。

(3)更广的适用性。

co模块约定,yield命令后面只能是 Thunk 函数或 Promise 对象,而async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。

(4)返回值是 Promise。

async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作

async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到return语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。

async function getTitle(url) {
  let response = await fetch(url);
  let html = await response.text();
  return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)

上面代码中,函数getTitle内部有三个操作:抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成,才会执行then方法里面的console.log。
只要一个await语句后面的 Promise 变为reject,那么整个async函数都会中断执行。

多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。

let foo = await getFoo();
let bar = await getBar();

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

异步 Generator 函数

async function* gen() {
  yield 'hello';
}
const genObj = gen();
genObj.next().then(x => console.log(x));
// { value: 'hello', done: false }

上面代码中,gen是一个异步 Generator 函数,执行后返回一个异步 Iterator 对象。对该对象调用next方法,返回一个 Promise 对象。

异步遍历器的设计目的之一,就是 Generator 函数处理同步操作和异步操作时,能够使用同一套接口。

相关文章

  • async和await的使用

    async函数 什么是async函数? async函数是使用async关键字声明的函数。 mdn文档:https:...

  • JS中的async/await -- 异步隧道尽头的亮光

    async函数 简单解释async函数就是Generator函数的语法糖。 Generator函数写法 async...

  • 2018-05-22

    async 函数 1. 含义 async 函数是 Generator 函数的语法糖。async函数将Generat...

  • ES8(13)、await 和 async 的用法

    async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且...

  • async函数

    async函数 async函数的含义 简单来说:async 函数就是 Generator 函数的语法糖下面是两个是...

  • ES8-async&await

    async函数是使用async关键字声明的函数,async函数是AsyncFunction构造函数的实例,返回值是...

  • async 函数(转载)

    async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 async 函数是...

  • ES7 Async/Await快速入门

    用法: 使用async 声明函数,在async函数内使用await async function xxx(){aw...

  • ES6——异步操作

    async 函数 ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是什么?一...

  • async/await 原理及简单实现

    解决函数回调经历了几个阶段, Promise 对象, Generator 函数到async函数。async函数目...

网友评论

      本文标题:async 函数

      本文链接:https://www.haomeiwen.com/subject/simpbxtx.html