美文网首页
async函数用法

async函数用法

作者: iceoreocheese | 来源:发表于2019-06-14 10:36 被阅读0次

async await

ES2017 标准引入了 async 函数,使得异步操作变得更加方便。
async 函数是什么?一句话,它就是 Generator 函数的语法糖。
前文有一个 Generator 函数,依次读取两个文件。

var fs = require('fs');

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* () {
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

写成async函数,就是下面这样。

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

一比较就会发现,async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。

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

  • (1)内置执行器。

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

var result = asyncReadFile();

复制代码上面的代码调用了asyncReadFile函数,然后它就会自动执行,输出最后结果。这完全不像 Generator 函数,需要调用next方法,或者用co模块,才能真正执行,得到最后结果。

  • (2)更好的语义。

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

  • (3)更广的适用性。

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

  • (4)返回值是 Promise。

async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。
进一步说,async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。

用法

基本用法

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
下面是一个例子。

async function getStockPriceByName(name) {
  var symbol = await getStockSymbol(name);
  var stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

上面代码是一个获取股票报价的函数,函数前面的async关键字,表明该函数内部有异步操作。调用该函数时,会立即返回一个Promise对象。
下面是另一个例子,指定多少毫秒后输出一个值。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);

上面代码指定50毫秒以后,输出hello world
由于async函数返回的是 Promise 对象,可以作为await命令的参数。所以,上面的例子也可以写成下`面的形式。

async function timeout(ms) {
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);
async 函数有多种使用形式。
// 函数声明
async function foo() {}

// 函数表达式
const foo = async function () {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jake').then(…);

// 箭头函数
const foo = async () => {};

相关文章

  • ES7 Async/Await快速入门

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

  • Generator 函数的含义与用法

    Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义与用法 async函数的含义与用法...

  • 理解用 async/await 来处理异步

    理解用 async/await 来处理异步 async的用法 async 作为一个关键字放到函数前面,用于表示函数...

  • 2020-04-15 async 函数

    async 函数 异步操作函数 1.基本用法 async函数返回一个 Promise 对象,可以使用then方法添...

  • async/await 的一些小总结

    首先async/await的用法很简单,用法如下 async函数返回一个Promise对象,可以使用then方法添...

  • ES8之async函数

    什么是async函数 async 函数是什么?一句话,它就是 Generator 函数的语法糖。 基本用法 asy...

  • 用async/await处理异步回调

    async 关键字 写一个async 函数 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是...

  • async的用法

    asnyc基础用法 async 的语法 async 其实就promise的语法糖。函数前面必须加一个async,异...

  • async函数用法

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

  • Promise≠异步,async函数≠异步

    本文并不提供Promise和async函数的用法说明,仅尝试通过简单的示例代码对Promise和async函数的概...

网友评论

      本文标题:async函数用法

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