Javascript异步编程(五: Boss[async 函数])

前言

JavaScript 最麻烦的就是异步操作，麻烦到一直有人提出各种各样的方案，试图解决这个问题。

从callback到Promise 对象，再到 Generator 函数。虽然解决了部分问题,但是又需要开发者去理解抽象的底层运行机制。

async 函数是什么？

现在你可以不去想thunk, co , Generator 函数。

async 函数就是ES7 中的解决方案，他可以让开发者以编写同步的方式,编写异步操作,不再关心是不是异步。

况且 他本身就是Generator 函数的一个语法糖(升级版)。将Generator 函数和自动执行器，包装在一个函数里。

首先

因为nodejs 8默认支持async 。所以你先确保你的nodejs 版本。

以Windows为例子

window+r
输入 cmd
回车
输入 node -v 

若版本不够

去官网, 下载升级

https://nodejs.org/en/

实现

我们将前文的读取文件的Generator 函数,改成async函数。

const fs = require('fs');

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

const asyncReadFile = async function() {
    const basic = await readFile('1.txt','utf8');
    const package = await readFile('2.txt','utf8');
    console.log(basic.toString());
    console.log(package.toString());
}

通过上面代码。一比较就会发现，async 函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成 await，仅此而已。

async 函数的优点

如果仅仅是改变写法。那也不说这是Generator 函数的一个语法糖了。async的改进体现在3点。

（1）内置执行器。 Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。
也就是说，async 函数的执行，与普通函数一模一样，只要一行。

const g = asyncReadFile();

// 输出结果
测试数据1
测试数据2

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

（3）更广的适用性。 co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。

实现async 函数

async 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里。

async function fn(args){
    //TODO
}

// 等同于
function fn(args){ 
  return spawn(function*() {
      //TODO
  }); 
} 

所有的 async 函数都可以写成上面的第二种形式，其中的 spawn 函数就是自动执行器。

下面给出 spawn 函数的实现，基本就是前文自动执行器的翻版。

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    var gen = genF();
    function step(nextF) {
      try {
        var next = nextF();
      } catch(e) {
        return reject(e); 
      }
      if(next.done) {
        return resolve(next.value);
      } 
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });      
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

async 函数的用法

同 Generator 函数一样，async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

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

下面是一个例子。

const fetch = require('node-fetch');

// 测试async
async function sendApply() {
    const result = await fetch('https://api.github.com/users/github');
    return result;
}

sendApply().then(result => result.json())
    .then(data =>{
        console.log(data['avatar_url']);
        // 输出结果
        // https://avatars1.githubusercontent.com/u/9919?v=4
    });

上面代码是一个异步函数请求数据，函数前面的async关键字，表明该函数内部有异步操作。
调用该函数时，会立即返回一个Promise对象。

下面的例子，指定多少毫秒后输出一个值。

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

async function asyncPrint(value, ms) {
    const startTime = new Date().getTime();
    console.log('进来了'+value,startTime);
    await timeout(ms);
    console.log('完成了'+value,new Date().getTime()-startTime);
}

asyncPrint('hello world', 2000);

结果是

进来了hello world 1505648212868
完成了hello world 2003 // 有点误差 哈哈

上面代码，可以看出第二次打印是在, 等待第一次完成才进行的。

补充注意

1. await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try…catch代码块中。

async function Fn1() {
  try {
    await doSomethingPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法

async function Fn2() {
  await doSomethingPromise().catch(err => {
    console.log(err);
  });
}

2. await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。

async function dbFuc(db) {
  let docs = [{}, {}, {}];

  // 报错
  docs.forEach(function (doc) {
    await db.post(doc);
  });
}

上面代码会报错，因为 await 用在普通函数之中了。但是，如果将 forEach 方法的参数改成 async 函数，也有问题。

async function dbFuc(db) {
  let docs = [{}, {}, {}];

  // 可能得到错误结果
  docs.forEach(async function (doc) {
    await db.post(doc);
  });
}

上面代码可能不会正常工作，原因是这时三个 db.post 操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用 for 循环。

async function dbFuc(db) {
  let docs = [{}, {}, {}];

  for (let doc of docs) {
    await db.post(doc);
  }
}

如果确实希望多个请求并发执行，可以使用 Promise.all 方法。

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map(doc => db.post(doc));

  let results = await Promise.all(promises);
  console.log(results);
}

// 或者使用下面的写法

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = [];
  for (let promise of promises) {
    results.push(await promise);
  }
  console.log(results);
}