关闭

【web前端开发技术】深入理解JavaScript异步编程--JavaScript异步编程的终极演变

标签: javascriptes6web前端开发node.js异步
435人阅读 评论(0) 收藏 举报
分类:

写在前面

有一个有趣的问题:

为什么Node.js约定回调函数的第一个参数必须是错误对象err(如果没有错误,该参数就是null)?

原因是执行回调函数对应的异步操作,它的执行分成两段,这两段之间抛出的错误程序无法捕获,所以只能作为参数传入第二段。大家知道,JavaScript只有一个线程,如果没有异步编辑,复杂的程序基本没法使用。在ES6诞生以前,异步编程的方式大概有下面四种:

  • 回调函数

  • 事件监听

  • 发布/订阅

  • Promise对象

ES6将JavaScript异步编程带入了一个全新的阶段,ES7中的async函数更是给出了异步编程的终极解决方案。下面将具体讲解异步编程的原理和值得注意的地方,待我细细道来~

异步编程的演变

基本理解

所谓异步,简单地说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好准备再回过头执行第二段。

举个例子
读取一个文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。

相应地,连续的执行就叫作同步。由于是连续执行,不能插入其他任务,所以操作系统从硬盘读取文件的这段时间,程序只能干等着。

回调函数

所谓回调函数,就是把任务的第二段单独写在一个函数中,等到重新执行该任务时直接调用这个函数。其英文名字 callback 直译过来就是 "重新调用"的意思。

拿上面的例子讲,读取文件操作是这样的:

fs.readFile(fileA, (err, data) => {
    if (err) throw err;
    console.log(data)
})

fs.readFile(fileB, (err, data) => {
    if (err) throw err;
    console.log(data)
})

注意:上面两段代码彼此是异步的,虽然开始执行的顺序是从上到下,但是第二段并不会等到第一段结束才执行,而是并发执行。

那么问题来了,如果想fileB等到fileA读取成功后再开始执行应该怎么处理呢?最简单的办法是通过 回调嵌套

fs.readFile(fileA, (err, data) => {
    if (err) throw err;
    console.log(data)
    
    fs.readFile(fileB, (_err, _data) => { 
        if (_err) throw err;
        console.log(_data)
    })
})

这种方式我只能容忍个位数字的嵌套,而且它使得代码横向发展,实在是丑的一笔,次数多了根本是没法看。试想万一要同步执行100个异步操作呢?疯掉算了吧!有没有更好的办法呢?

使用Promise

要澄清一点,Promise的概念并不是ES6新出的,而是ES6整合了一套新的写法。同样继续上面的例子,使用Promise代码就变成这样了:

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

readFile(fileA)
.then((data)=>{console.log(data)})
.then(()=>{return readFile(fileB)})
.then((data)=>{console.log(data)})
// ... 读取n次
.catch((err)=>{console.log(err)})

注意:上面代码使用了Node封装好的Promise版本的readFile函数,它的原理其实就是返回一个Promise对象,咱也简单地写一个:

var fs = require('fs');

var readFile = function(path) {
    return new Promise((resolve, reject) => {
        fs.readFile(path, (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

module.export = readFile

但是,Promise的写法只是回调函数的改进,使用then()之后,异步任务的两段执行看得更清楚,除此之外并无新意。撇开优点,Promise的最大问题就是代码冗余,原来的任务被Promise包装一下,不管什么操作,一眼看上去都是一堆then(),原本的语意变得很不清楚。

把酒问苍天,MD还有更好的办法吗?

使用Generator

在引入generator之前,先介绍一下什么叫 协程

"携程在手,说走就走"。哈哈,别混淆了, "协程" 非 "携程"

协程

所谓 "协程" ,就是多个线程相互协作,完成异步任务。协程有点像函数,又有点像线程。其运行流程大致如下:

  • 第一步: 协程A开始执行

  • 第二步:协程A执行到一半,暂停,执行权转移到协程B

  • 第三步:一段时间后,协程B交还执行权

  • 第四步:协程A恢复执行

function asyncJob() {
    // ... 其他代码
    var f = yield readFile(fileA);
    // ... 其他代码 
}

上面的asyncJob()就是一个协程,它的奥妙就在于其中的yield命令。它表示执行到此处执行权交给其他协程,换而言之,yield就是异步两个阶段的分界线。

协程遇到yield命令就暂停,等到执行权返回,再从暂停的地方继续往后执行。它的最大优点就是代码的写法非常像同步操作,如果除去 yield命令,简直一模一样。

Generator函数

Generator函数是协程在ES6中的实现,最大的特点就是可以交出函数的执行权(即暂停执行)。整个Generator函数就是一个封装的异步任务,或者说就是异步任务的容器。

function* gen(x) {
    var y = yield x + 2;
    return y;
} 

var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }

上面的代码中,调用Generator函数,会返回一个内部指针(即遍历器)g,这是Generator函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next()方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yield语句。

换而言之,next()方法的作用是分阶段执行Generator函数。每次调用next()方法,会返回一个对象,表示当前阶段的信息(value属性和done属性)。value属性是yield语句后面表达式的值,表示当前阶段的值;done属性是一个布尔值,表示Generator函数是否执行完毕,即是否还有一个阶段。

Generator函数的数据交换和错误处理

Generator函数可以暂停执行和恢复执行,这是它封装异步任务的根本原因。除此之外,它还有两个特性,使它可以作为异步编程的解决方案:函数体内外的数据交换和错误处理机制。

next()方法返回值的value属性,是Generator函数向外输出的数据;next()方法还可以接受参数,向Generator函数体内输入数据。

function* gen(x) {
    var y = yield x + 2;
    return y;
} 

var g = gen(1);
g.next()      // { value: 3, done: false }
g.next(2)     // { value: 2, done: true }

上面的代码中,第一个next()方法的value属性,返回表达式x+2的值(3)。第二个next()方法带有参数2,这个参数可以传入Generator函数,作为上个阶段异步任务的返回结果,被函数体内的变量y接收,因此这一步的value属性返回的就是2(变量y的值)。

Generator函数内部还可以部署错误处理代码,捕获函数体外抛出的错误。

function* gen(x) {
    try {
        var y = yield x + 2
    } catch(e) {
        console.log(e)
    }
    return y
}

var g = gen(1);
g.next();
g.throw('出错了');

上面代码的最后一行,Generator函数体外,使用指针对象的throw方法抛出的错误,可以被函数体内的try...catch 代码块捕获。这意味着,出错的代码与处理错误的代码,实现了时间和空间上的分离,这对于异步编程无疑是很重要的。

异步任务的封装

下面看看如何使用Generator函数,执行一个真实的异步任务。

var fetch = require('node-fetch')

function* gen() {
    var url = 'https://api.github.com/usrs/github';
    var result = yield fetch(url);
    console.log(result.bio);
} 

上面代码中,Generator函数封装了一个异步操作,该操作先读取一个远程接口,然后从JSON格式的数据解析信息。就像前面说过的,这段代码非常像同步操作。除了加上yield命令。

执行这段代码的方法如下:

var g = gen();
var result = g.next();

result.value.then(function(data) {
    return data.json()
}).then(function(data) {
    g.next(data)
});

上面代码中,首先执行Generator函数,获取遍历器对象。然后使用next()方法,执行异步任务的第一阶段。由于Fetch模块返回的是一个Promise对象,因此需要用then()方法调用下一个next()方法。

可以看到,虽然Generator函数将异步操作表示得很简洁,但是流程管理却不方便(即合适执行第一阶段,何时执行第二阶段)

大Boss登场之 async函数

所谓async函数,其实是Generator函数的语法糖。

继续我们异步读取文件的例子,使用Generator实现

var fs = require('fs');

var readFile = (path) => {
    return new Promise((resolve, reject) => {
        fs.readFile(path, (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

var gen = function* () {
    var f1 = yield readFile(fileA);
    var f2 = yield readFile(fileB);
    console.log(f1.toString());
    console.log(f2.toString());
}

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

var asyncReadFile = async function() {
    var f1 = await readFile(fileA);
    var f2 = await readFile(fileB);
    console.log(f1.toString())
    console.log(f2.toString())
}

发现了吧,async函数就是将Generator函数的*替换成了async,将yield替换成await,除此之外,还对 Generator做了以下四点改进:

(1)内置执行器。Generator函数的执行比如靠执行器,所以才有了co模块等异步执行器,而async函数是自带执行器的。也就是说:async函数的执行,与普通函数一模一样,只要一行:

var result = asyncReadFile();

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

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

(4)更广的适用性。async函数的await命令后面可以是Promise对象和原始类型的值(数值、字符串和布尔值,而这是等同于同步操作)。

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

进一步说,async函数完全可以看作由多个异步操作包装成的一个Promise对象,而await命令就是内部then()命令的语法糖。

实现原理

async函数的实现就是将Generator函数和自动执行器包装在一个函数中。如下代码:

async function fn(args) {
    // ...
}

// 等同于 
function fn(args) {
  return spawn(function*() {
    // ...
  })
}
// 自动执行器
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函数用法

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

下面是一个延迟输出结果的例子:

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

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

// 延迟500ms后输出 "Hello World!"
asyncPrint('Hello World!', 500)

注意事项

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

(2)await命令只能用在async函数中,用在普通函数中会报错。

(3)ES6await增加为保留字。如果使用这个词作为标识符,在ES5中是合法的,但是ES6会抛出 SyntaxError(语法错误)。

终极一战

"倚天不出谁与争锋",上面介绍了一大堆,最后还是让我们通过一个例子来看看 async 函数和PromiseGenerator到底谁才是真正的老大吧!

需求:假定某个DOM元素上部署了一系列的动画,前一个动画结束才能开始后一个。如果当中又一个动画出错就不再往下执行,返回上一个成功执行动画的返回值。

Promise实现

function chainAnimationsPromise(ele, animations) {

  // 变量ret用来保存上一个动画的返回值 
  var ret = null;
  
  // 新建一个空的Promise 
  var p = Promise.resolve();

  // 使用then方法添加所有动画 
  for (var anim in animations) {
    p = p.then(function(val) {
      ret = val;
      return anim(ele);
    })
  }
  
  // 返回一个部署了错误捕获机制的Promise 
  return p.catch(function(e) {
    /* 忽略错误,继续执行 */
  }).then(function() {
    return ret;
  })
}

虽然Promise的写法比起回调函数的写法有很大的改进,但是操作本身的语义却变得不太明朗。

Generator实现

function chainAnimationsGenerator(ele, animations) {
  return spawn(function*() {
    var ret = null;
    try {
      for(var anim of animations) {
        ret = yield anim(ele)
      }
    } catch(e) {
      /* 忽略错误,继续执行 */
    }
    return ret;
  })
}

使用Generator虽然语义比Promise写法清晰不少,但是用户定义的操作全部出现在spawn函数的内部。这个写法的问题在于,必须有一个任务运行器自动执行Generator函数,它返回一个Promise对象,而且保证yield语句后的表达式返回的是一个Promise。上面的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实现

async function chainAnimationAsync(ele, animations) {
  var ret = null;
  try {
    for(var anim of animations) {
      ret = await anim(ele)
    } 
  } catch(e) {
    /* 忽略错误,继续执行 */
  }
  return ret;
}

好了,光从代码量上就看出优势了吧!简洁又符合语义,几乎没有不相关代码。完胜!

注意一点:async属于ES7的提案,使用时请通过babel或者regenerator进行转码。

参考

阮一峰 《ES6标准入门》

原文地址:https://segmentfault.com/a/1190000006510526


【关于我们】

每天名企社招内推微信众号ourpush),专注于国内各大互联网公司社会招聘内推。每天更新最新互联网名企(包括但不限于BAT网易小米京东乐视携程等名企)内推信息,有技术岗、有产品岗、有运营岗、有设计岗、有交互岗、有销售岗,更有其他N多相关岗位!更多内推信息请扫描以下二维码关注查阅。



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:63110次
    • 积分:933
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:167篇
    • 译文:0篇
    • 评论:2条
    微信公众号
    最新评论