2

异步的“坑”

最近一段时间参与开发了一个Node.js后台项目,作为一个PHP开发者,上手项目本身并不难,但是开发的过程却并不顺利,不顺利的主要原因在于思路上没有转变,没有从同步的思维转换到异步的思维。

所谓同步,就是程序(进程/线程)在一个任务的处理过程中,不会插入处理其他任务,即使遇到IO等不占CPU的操作,也会一直等待其结束才会继续往下处理。

所谓异步,就是程序(进程/线程)在一个任务的处理过程中,会插入处理其他任务,如遇到IO操作,当前任务会将程序(进程/线程)的控制权释放给其他任务,等IO操作结果返回后再继续往下处理。

简单地讲,同步不会释放控制权,异步会释放控制权。

众所周知,Node.js采用的是单线程的异步模型,在具体代码的写法上自然和PHP等同步模型不一样。在具体项目开发的过程中,各种异步操作相关的关键字层出不穷,如:.then()function* ... yieldasync...await等等。为了写一个类似同步的操作,比如:“在执行完A步骤拿到结果之后再执行B步骤”这么一个简单的需求,却要经过大量的反复调试验证才能解决。究其原因,就是对于这些异步操作的场景和关键字的含义理解不到位,异步操作所提供的选择太多了。

下面就结合代码实例,理一理这些异步操作方案究竟怎么使用。

异步的各种写法

任务说明:项目根目录下有三个文件Jay.txtAngela.txtHenry.txt,依次读取这三个文件的内容并打印。

下面使用各种异步处理的方法来完成此任务。

回调函数

const fs = require('fs');

fs.readFile('Jay.txt', 'utf8', function (err, data) {
    if (err) throw err;
    console.log(data);
    fs.readFile('Angela.txt', 'utf8', function (err, data) {
        if (err) throw err;
        console.log(data);
        fs.readFile('Henry.txt', 'utf8', function (err, data) {
            if (err) throw err;
            console.log(data);
        });
    });
});

console.log("finish");
1、函数 fs.readFile() 用于异步读取文件的所有内容,该函数本身没有返回值。读取的文件内容异步返回后通过回调函数处理。
2、函数fs.readFile()的第二个参数是可选参数,如果指定了编码方式,则返回对应编码方式的字符串;如果没有指定,则返回文件的二进制内容,对应类型为Buffer,可以通过 buf.toString() 方法转换成对应的字符串。
3、回调函数的第一个参数必须是错误对象,如果没有错误则错误对象的值为null

执行程序:

$ node 0A_callback_01.js
finish
Hello, I'm Jay.
Hello, I'm Angela.
Hello, I'm Henry.

程序最先返回finish,是因为函数fs.readFile()是异步处理的,在调用后会直接继续往下处理,在文件内容返回后通过注册的回调函数处理。

串行和并行

通常,人们总是分不清同步异步串行并行之间的区别,朴素地认为:同步就是串行,异步就是并行。这么讲似乎对又似乎不对。

同步异步是从程序(进程/线程)执行方式的角度来看的,文章开头已经简单讲过同步异步的概念和区别。如果在程序的执行的过程中不发生任务切换,即:做当前任务的一件事情,等待这件事情完成后,再做当前任务的下一件事情,直到当前任务完成,这种方式就是同步。如果在程序的执行的过程中发生任务切换,即:做当前任务的一件事情,不等待这件事情做完,直接转去做其他任务,再做当前任务的下一件事情,如此往复,直到当前任务完成,这种方式就是异步

串行并行是从任务(事情)的角度来看的,如果多个任务(事情)不能同时做,而是做完一个才能做下一个,则就将这几个任务(事情)称作是串行的。如果多个任务(事情)可以同时做,则就将这几个任务(事情)称作是并行的。

同步就是串行这句话在一定程度上是正确的,因为同步程序做完一件事情,才会做下一件事情,从两件事情上看,是不会同时做的,所以同步程序只能串行地做事情。

异步就是并行这句话就不是那么回事了,异步程序可以选择串行地做事情,也可以选择并行地做事情,是串行做还是并行做取决于具体的业务场景。对于一个任务下的两件事情A和B,如果B依赖于A的结果,则需要串行;如果B不依赖于A的结果,则可以并行。还是以本文的读取三个文件为例,上面的代码示例就是串行执行的,依次读取"Jay.txt""Angela.txt""Henry.txt"的内容并打印出来。如果要改成并行执行该怎么做呢?简单做个改造就行,如下。

const fs = require('fs');

fs.readFile('Jay.txt', 'utf8', function (err, data) {
    if (err) throw err;
    console.log(data);
});

fs.readFile('Angela.txt', 'utf8', function (err, data) {
        if (err) throw err;
        console.log(data);
});

fs.readFile('Henry.txt', 'utf8', function (err, data) {
    if (err) throw err;
    console.log(data);
});

console.log("finish");

执行程序:

finish
Hello, I'm Angela.
Hello, I'm Jay.
Hello, I'm Henry.
从结果也可以看出,由于三个文件是并行读取的,所以哪个先读完是随机的,和代码写的顺序无关。按顺序写的代码就会按顺序执行,这是典型的同步编程思维,要尽快转变过来,否则早晚有一天会“翻车”的。

Promise对象

Promise对象能够表示一个异步操作的状态和结果,使用其提供的.then()方法可以将多个多个异步操作“串联”起来,.then()方法本身也返回一个Promise对象。

同样是按顺序读取三个文件的任务,示例如下:

var readFilePromise = require('fs-readfile-promise');

readFilePromise('Jay.txt', 'utf8')
    .then(function(data) {
        console.log(data);
    })
    .then(function() {
        return readFilePromise('Angela.txt', 'utf8');
    })
    .then(function(data) {
        console.log(data);
    })
    .then(function() {
        return readFilePromise('Henry.txt', 'utf8');
    })
    .then(function(data) {
        console.log(data);
    })
    .catch(function(err) {
        console.log(err);
    });

console.log("finish");

执行程序:

$ node 0B_promise_01.js
finish
Hello, I'm Jay.
Hello, I'm Angela.
Hello, I'm Henry.

Promise对象有pending(初始)fulfilled(成功)rejected(失败)三种状态。当异步操作成功时,Promise对象从pending状态变为fulfilled状态,并将成功结果传递给.then()方法的第一个参数(也叫onfulfilled函数);当异步操作失败时,Promise对象从pending状态变为rejected状态,并将失败信息传递给.then()方法的第二个参数(也叫onrejected函数),如果没有指定第二个参数,则将失败信息传递给.catch()方法的参数(同样也叫onrejected函数)。

上面的程序,可以将上个文件的处理和下个文件的读取合并到一个.then()当中,示例如下:

var readFilePromise = require('fs-readfile-promise');

readFilePromise('Jay.txt', 'utf8')
    .then(function(data) {
        console.log(data);
        return readFilePromise('Angela.txt', 'utf8');
    })
    .then(function(data) {
        console.log(data);
        return readFilePromise('Henry.txt', 'utf8');
    })
    .then(function(data) {
        console.log(data);
    })
    .catch(function(err) {
        console.log(err);
    });

console.log("finish");
.then()当中,可以返回一个Promise对象,可以返回一个基础类型的值(数字、字符串、布尔值),也可以什么都不返回(直接return;),甚至连return语句都可以省略。这几种场景下的处理方式参考:.then()方法的返回值说明

Generator函数

Generator函数(生成器函数)使用 function* 关键字定义,函数中使用yield关键字进行流程控制,yield后面可以跟任何表达式(普通同步表达式、Promise对象、Generator函数)。需要特别注意的是,yield关键字必须放在Generator函数当中,否则运行时会报错!

Generator函数的返回值叫做 Generator对象(生成器对象),Generator对象有一个 .next() 方法,每执行一次.next()方法,就会迭代执行至Generator函数的下一个yield语句位置,并返回一个对象。该对象包含两个属性:valuedonevalue存储了yield后面表达式的值;done是一个布尔值,表示Generator函数是否执行完毕。

同样是按顺序读取三个文件的任务,示例如下:

var readFilePromise = require('fs-readfile-promise');

function* generator() {
    yield readFilePromise('Jay.txt', 'utf8');
    yield readFilePromise('Angela.txt', 'utf8');
    yield readFilePromise('Henry.txt', 'utf8');
}

let gen = generator();

gen.next().value.then(function(data) {
    console.log(data);
    gen.next().value.then(function(data) {
        console.log(data);
        gen.next().value.then(function(data) {
            console.log(data);
            gen.next();  // 返回:{ value: undefined, done: true },表示生成器函数执行结束
        });
    });
});

console.log("finish");

执行程序:

$ node 0C_generator_01.js
finish
Hello, I'm Jay.
Hello, I'm Angela.
Hello, I'm Henry.

本例中,generator()是一个生成器函数,其返回值gen是一个生成器对象。gen.next()返回的对象结构如下。

{ value: Promise { <pending> }, done: false }

其中,gen.next().value是一个Promise,表示yield后面的readFilePromise()函数所返回的是一个Promise对象。

需要注意的是,生成器函数本身包含的各个异步操作并不能按照顺序串行执行,想要实现串行执行的话,还是需要配合Promise对象及其.then()函数来实现,如本例所示。

co函数库

co函数库是干什么的?co函数库是Generator函数的一种执行器。简单来讲,co函数库用来将上一节中手动执行Generator函数的过程自动化,这样一来,就使得采用同步思维写异步代码的想法成为现实。作为曾经是完全同步思维的程序员终于看到了曙光。

同样是按顺序读取三个文件的任务,示例如下:

var co = require('co');
var readFilePromise = require('fs-readfile-promise');

// generator()是一个生成器函数
function* generator() {
    let data = yield readFilePromise('Jay.txt', 'utf8');
    console.log(data);

    data = yield readFilePromise('Angela.txt', 'utf8');
    console.log(data);

    data = yield readFilePromise('Henry.txt', 'utf8');
    console.log(data);
}

let gen = generator();  // gen是一个生成器对象
co(generator()).then(function() {
    console.log('Generator function is finished!');
});

console.log("finish");

执行程序:

$ node 0D_co_01.js
finish
Hello, I'm Jay.
Hello, I'm Angela.
Hello, I'm Henry.
Generator function is finished!
当然,用好co的前提是有一些注意事项需要知道的:
1、co函数配套使用的Generator函数中,yield后面的异步操作需要返回一个Promise对象,否则就无法实现期望的同步效果;
2、co函数本身会返回一个Promise对象,所以如本例所示,是可以在其后使用.then()方法增加回调函数的。

async函数

co库函数已经将Generator函数的执行简化了很多,还能更简单一点吗?答案是:有,那就是async函数。

async函数与Generator函数相比,可以简单地理解为:将Generator函数中的*改为async,将yield改为await,就成了async函数

async函数与Generator函数相比:

  • async函数本身内置了执行器,无需再像Generator函数一样需要引入额外的执行器(如:co执行器);
  • async...awaitfunction*...yield相比,语义更加清晰明了:async表示函数中有异步操作,await表示需要等待异步操作返回结果;
  • await后面除了可以跟Promise对象之外,也可以跟基础类型的值,如:数字、字符串、布尔值,而yield后面必须要跟Promise对象;
  • async函数的返回值也是

同样是按顺序读取三个文件的任务,示例如下:

var readFilePromise = require('fs-readfile-promise');

async function asyncReadFile() {
    let data = await readFilePromise('Jay.txt', 'utf8');
    console.log(data);

    data = await readFilePromise('Angela.txt', 'utf8');
    console.log(data);

    data = await readFilePromise('Henry.txt', 'utf8');
    console.log(data);

    return "Async function is finished!"
}

asyncReadFile().then(function(data) {
    console.log(data);
});

console.log("finish");

执行程序:

$ node 0E_async_await_01.js
finish
Hello, I'm Jay.
Hello, I'm Angela.
Hello, I'm Henry.
Async function is finished!
从本例可以看出,除了asyncawait这两个关键字之外,整体代码的格式与函数调用方式和同步代码完全一样。由此可见,异步代码写法的终极目标就是让异步代码写起来和同步代码一样简单方便。然而,悲催的是,作为一个JS新人需要花好久才能把这些逐渐弄清楚,学习成本不可谓不高。

mumingv
24 声望1 粉丝

持之以恒,方得始终