ES6学习15(异步操作和Async函数)
2016-10-19 21:34
645 查看
异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。
ES6诞生以前,异步编程的方法,大概有下面四种。
回调函数
事件监听
发布/订阅
Promise 对象
ES6将JavaScript异步编程带入了一个全新的阶段,ES7的Async函数更是提出了异步编程的终极解决方案。
比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。
为什么Node.js约定,回调函数的第一个参数,必须是错误对象err(如果没有错误,该参数就是null)?原因是执行分成两段,在这两段之间抛出的错误,程序无法捕捉,只能当作参数,传入第二段。
Promise就是为了解决这个问题而提出的。它不是新的语法功能,而是一种新的写法,允许将回调函数的嵌套,改成链式调用。采用Promise,连续读取多个文件,写法如下。
Promise 的写法只是回调函数的改进,使用then方法以后,异步任务的两段执行看得更清楚了,除此以外,并无新意。
Promise 的最大问题是代码冗余,原来的任务被Promise 包装了一下,不管什么操作,一眼看去都是一堆 then,原来的语义变得很不清楚。
第一步,协程A开始执行
第二步,协程A执行到一半,进入暂停,执行权转移到协程B
第三步,(一段时间后)协程B交还执行权
第四步,协程A恢复执行。
Generator就是ES6中对协程的实现,比如读取文件:
任何函数,只要参数有回调函数,就能写成Thunk函数的形式。下面是一个简单的Thunk函数转换器。
有一个Thunkify模块,考虑的更加周到,基本思想是一样的:
这个called变量可以保证callback只执行一次,如果在异步过程中多次调用callback也只执行一次:
假设我们要依次读取两个文件,我们的Generator可以这样写:
手动执行时:
手动执行:
手动执行其实就是用then方法,层层添加回调函数。理解了这一点,就可以写出一个自动执行器,基本原理和Trunk函数的相同:
对于一个Generator,不需要再编写Generator的执行器:
co函数返回一个Promise对象,因此可以用then方法添加回调函数。
使用co的前提条件是,Generator函数的yield命令后面,只能是Thunk函数或Promise对象。
co支持并发的异步操作,即允许某些操作同时进行,等到它们全部完成,才进行下一步。
这时,要把并发的操作都放在数组或对象里面,跟在yield语句后面。
定义:
执行:
async函数对 Generator 函数的改进,体现在以下四点。
内置执行器。Generator函数的执行必须靠执行器,所以才有了co模块,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行,然后它就会自动执行,输出最后结果。这完全不像Generator函数,需要调用next方法,或者用co模块,才能得到真正执行,得到最后结果。
更好的语义。async和await,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。
更广的适用性。 co模块约定,yield命令后面只能是Thunk函数或Promise对象,而async函数的await命令后面,可以是Promise对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。
返回值是Promise。async函数的返回值是Promise对象,这比Generator函数的返回值是Iterator对象方便多了。你可以用then方法指定下一步的操作。
async函数内部return语句返回的值,会成为then方法回调函数的参数。
async函数内部抛出错误,会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async函数返回的Promise对象,必须等到内部所有await命令的Promise对象执行完,才会发生状态改变。只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。
正常情况下,await命令后面是一个Promise对象。如果不是,会被转成一个立即resolve的Promise对象。await命令后面的Promise对象如果变为reject状态,则reject的参数会被catch方法的回调函数接收到。
只要一个await语句后面的Promise变为reject,那么整个async函数都会中断执行。
如果await后面的异步操作出错,那么等同于async函数返回的Promise对象被reject。
对象的异步遍历器接口,部署在Symbol.asyncIterator属性上面。
上面代码中,异步遍历器其实返回了两次值。第一次调用的时候,返回一个Promise对象;等到Promise对象resolve了,再返回一个表示当前数据成员信息的对象。这就是说,异步遍历器与同步遍历器最终行为是一致的,只是会先返回Promise对象,作为中介。
由于异步遍历器的next方法,返回的是一个Promise对象。因此,可以把它放在await命令后面,await会等待这个Promise对象执行完,取它传到resolve函数里的值,就不用上面的then方法了。
注意,异步遍历器的next方法是可以连续调用的,不必等到上一步产生的Promise对象resolve以后再调用。这种情况下,next方法会累积起来,自动按照每一步的顺序运行下去。下面是一个例子,把所有的next方法放在Promise.all方法里面。
上面代码中,createAsyncIterable()返回一个异步遍历器,for…of循环自动调用这个遍历器的next方法,会得到一个Promise对象。await用来处理这个Promise对象,一旦resolve,就把得到的值(x)传入for…of的循环体。
如果next方法返回的Promise对象被reject,那么就要用try…catch捕捉。
在语法上,异步Generator函数就是async函数与Generator函数的结合。
上面代码中,异步操作前面使用await关键字标明,即await后面的操作,应该返回Promise对象。凡是使用yield关键字的地方,就是next方法的停下来的地方,它后面的表达式的值(即await file.readLine()的值),会作为next()返回对象的value属性,这一点是于同步Generator函数一致的。
yield命令依然是立刻返回的,但是返回的是一个Promise对象。
上面代码中,调用next方法以后,会在B处暂停执行,yield命令立刻返回一个Promise对象。这个Promise对象不同于A处await命令后面的那个Promise对象。主要有两点不同,一是A处的Promise对象resolve以后产生的值,会放入result变量;二是B处的Promise对象resolve以后产生的值,是表达式’Result: ’ + result的值;三是A处的Promise对象一定先于B处的Promise对象resolve。
如果异步Generator函数抛出错误,会被Promise对象reject,然后抛出的错误被catch方法捕获。
注意,普通的async函数返回的是一个Promise对象,而异步Generator函数返回的是一个异步Iterator对象。async函数和异步Generator函数,是封装异步操作的两种方法,都用来达到同一种目的。区别在于,前者自带执行器,后者通过for await…of执行,或者自己编写执行器。
下面就是一个异步Generator函数的执行器。
上面代码中,gen2函数里面的result变量,最后的值是2。
与同步Generator函数一样,for await…of循环会展开yield*。
ES6诞生以前,异步编程的方法,大概有下面四种。
回调函数
事件监听
发布/订阅
Promise 对象
ES6将JavaScript异步编程带入了一个全新的阶段,ES7的Async函数更是提出了异步编程的终极解决方案。
基本概念
所谓”异步”,简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。
回调函数
读取文件进行处理,是这样写的:fs.readFile('/etc/passwd', function (err, data) { if (err) throw err; console.log(data); });
为什么Node.js约定,回调函数的第一个参数,必须是错误对象err(如果没有错误,该参数就是null)?原因是执行分成两段,在这两段之间抛出的错误,程序无法捕捉,只能当作参数,传入第二段。
Promise
回调函数本身并没有问题,它的问题出现在多个回调函数嵌套。这个是个老问题了。Promise就是为了解决这个问题而提出的。它不是新的语法功能,而是一种新的写法,允许将回调函数的嵌套,改成链式调用。采用Promise,连续读取多个文件,写法如下。
var readFile = require('fs-readfile-promise'); readFile(fileA) .then(function(data){ console.log(data.toString()); }) .then(function(){ return readFile(fileB); }) .then(function(data){ console.log(data.toString()); }) .catch(function(err) { console.log(err); });
Promise 的写法只是回调函数的改进,使用then方法以后,异步任务的两段执行看得更清楚了,除此以外,并无新意。
Promise 的最大问题是代码冗余,原来的任务被Promise 包装了一下,不管什么操作,一眼看去都是一堆 then,原来的语义变得很不清楚。
Generator
协程
协程有点像函数,又有点像线程。它的运行流程大致如下。第一步,协程A开始执行
第二步,协程A执行到一半,进入暂停,执行权转移到协程B
第三步,(一段时间后)协程B交还执行权
第四步,协程A恢复执行。
Generator就是ES6中对协程的实现,比如读取文件:
function *asyncJob() { // ...其他代码 //首次调用next运行到这里,开始执行readFile函数,这个函数暂停执行 //在readFile中,完成读取后再调用这个Generator的next并将返回的结果传入 //这个结果就会作为yield的语句的返回值赋给f,然后继续执行到下一个yield var f = yield readFile(fileA); // ...其他代码 }
异步任务的封装
var fetch = require('node-fetch'); function* gen(){ var url = 'https://api.github.com/users/github'; var result = yield fetch(url); console.log(result.bio); } var g = gen(); var result = g.next(); result.value.then(function(data){ return data.json(); }).then(function(data){ g.next(data); });
Thunk函数
在JavaScript语言中,Thunk函数替换多参数函数,将其替换成单参数的版本,且只接受回调函数作为参数。任何函数,只要参数有回调函数,就能写成Thunk函数的形式。下面是一个简单的Thunk函数转换器。
var fs = require('fs'); var Thunk = function(fn) { return function (...args) { return function (callback) { return fn.call(this, ...args, callback); } }; }; var readFileThunk = Thunk(fs.readFile); readFileThunk("./import.js")(function(err,data){ console.log(data); });
有一个Thunkify模块,考虑的更加周到,基本思想是一样的:
function thunkify(fn){ return function(){ var args = new Array(arguments.length); var ctx = this; for(var i = 0; i < args.length; ++i) { args[i] = arguments[i]; } return function(done){ var called; args.push(function(){ //这里利用闭包保存了一个called变量,来标志一个回调函数是否已经被执行过 if (called) return; called = true; done.apply(null, arguments); }); try { fn.apply(ctx, args); } catch (err) { done(err); } } } }; var read = thunkify(fs.readFile); read('./import.js')(function(err, str){ console.log(str); });
这个called变量可以保证callback只执行一次,如果在异步过程中多次调用callback也只执行一次:
function f(a, b, callback){ var sum = a + b; callback(sum); callback(sum); } var ft = thunkify(f); var print = console.log.bind(console); ft(1, 2)(print); // 3
Generator 函数的流程管理
你可能会问, Thunk函数有什么用?回答是以前确实没什么用,但是ES6有了Generator函数,Thunk函数现在可以用于Generator函数的自动流程管理。假设我们要依次读取两个文件,我们的Generator可以这样写:
var fs = require('fs'); var readFile = thunkify(fs.readFile); var gen = function* (){ var r1 = yield readFile('./import.js'); console.log(r1.toString()); var r2 = yield readFile('./import.js'); console.log(r2.toString()); };
手动执行时:
var g = gen(); var r1 = g.next(); r1.value(function(err, data){ if (err) throw err; var r2 = g.next(data); r2.value(function(err, data){ if (err) throw err; g.next(data); }); });
Thunk函数的自动流程管理
Generator函数的执行过程,其实是将同一个回调函数,反复传入next方法的value属性。这使得我们可以用递归来自动完成这个过程。function run(fn) { //执行传入的Generator,获得遍历器对象 var gen = fn(); //要传入Trunk函数的回调函数 //在这里就相当于是readFile('./import.js')(next) //首先要手动执行一下next(),此时调用gen.next(data)时无论data是什么值Generator都会忽略的 //这时result/value获得到的就是一个readFile('./import.js'),也就是一个trunk函数 //再把next传进去,就可以开始递归执行了 function next(err, data) { var result = gen.next(data); if (result.done) return; result.value(next); } next(); } run(gen);
基于Promise的自动流程管理
var fs = require('fs'); //先把一个异步操作封装为一个Promise对象 var readFile = function (fileName){ return new Promise(function (resolve, reject){ fs.readFile(fileName, function(error, data){ if (error) return reject(error); resolve(data); }); }); }; var gen = function* (){ //每次执行next返回的就是一个Promise对象 var f1 = yield readFile('./import.js'); console.log(f1.toString()); var f2 = yield readFile('./import.js'); console.log(f2.toString()); };
手动执行:
var g = gen(); g.next().value.then(function(data){ g.next(data).value.then(function(data){ g.next(data); }); });
手动执行其实就是用then方法,层层添加回调函数。理解了这一点,就可以写出一个自动执行器,基本原理和Trunk函数的相同:
var run = function(gen) { var g = gen(); function next(data){ var result = g.next(data); if (result.done) return result.value; result.value.then(function(data){ next(data); }); } next(); } run(gen);
co模块
co模块是著名程序员TJ Holowaychuk于2013年6月发布的一个小工具,用于Generator函数的自动执行。对于一个Generator,不需要再编写Generator的执行器:
co(gen);
co函数返回一个Promise对象,因此可以用then方法添加回调函数。
co(gen).then(function (){ console.log('Generator 函数执行完成'); });
使用co的前提条件是,Generator函数的yield命令后面,只能是Thunk函数或Promise对象。
co支持并发的异步操作,即允许某些操作同时进行,等到它们全部完成,才进行下一步。
这时,要把并发的操作都放在数组或对象里面,跟在yield语句后面。
// 数组的写法 co(function* () { var res = yield [ Promise.resolve(1), Promise.resolve(2) ]; console.log(res); }).catch(onerror);
async函数
ES7提供了async函数,使得异步操作变得更加方便。async函数是什么?一句话,async函数就是Generator函数的语法糖。定义:
var asyncReadFile = async function (){ var f1 = await readFile('/etc/fstab'); var f2 = await readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString()); };
执行:
var result = asyncReadFile();
async函数对 Generator 函数的改进,体现在以下四点。
内置执行器。Generator函数的执行必须靠执行器,所以才有了co模块,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行,然后它就会自动执行,输出最后结果。这完全不像Generator函数,需要调用next方法,或者用co模块,才能得到真正执行,得到最后结果。
更好的语义。async和await,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。
更广的适用性。 co模块约定,yield命令后面只能是Thunk函数或Promise对象,而async函数的await命令后面,可以是Promise对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。
返回值是Promise。async函数的返回值是Promise对象,这比Generator函数的返回值是Iterator对象方便多了。你可以用then方法指定下一步的操作。
语法
async函数返回一个Promise对象。async函数内部return语句返回的值,会成为then方法回调函数的参数。
async函数内部抛出错误,会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async function f() { throw new Error('出错了'); return 'hello world'; } f().then( v => console.log(v), e => console.log(e) ) // Error: 出错了
async函数返回的Promise对象,必须等到内部所有await命令的Promise对象执行完,才会发生状态改变。只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。
正常情况下,await命令后面是一个Promise对象。如果不是,会被转成一个立即resolve的Promise对象。await命令后面的Promise对象如果变为reject状态,则reject的参数会被catch方法的回调函数接收到。
只要一个await语句后面的Promise变为reject,那么整个async函数都会中断执行。
如果await后面的异步操作出错,那么等同于async函数返回的Promise对象被reject。
async 函数的用法
async函数返回一个Promise对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。function timeout(data, ms) { return new Promise((resolve) => { setTimeout(function(){ resolve(data); }, ms); }); } async function asyncPrint(value, ms) { //timeout会返回一个promise对象 //await会等待这个对象中的resolve方法执行 //并用其参数当做自己的返回值 //值得注意的是await命令后面的Promise对象 //运行结果可能是rejected //所以最好把await命令放在try...catch代码块中 //或者使用catch方法 var a = await timeout(value,ms) .catch(function (err) { console.log(err); }); console.log('a:'+a); return 'async over' } asyncPrint('hello world', 5000).then(v => console.log(v)); console.log('after async'); //after async //a:hello world //async over
注意事项
//多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发 //这样就不好,一个执行完再执行一个 //假设getFoo()和getBar()会返回Promise对象 let foo = await getFoo(); let bar = await getBar(); //可以这样 let [foo, bar] = await Promise.all([getFoo(), getBar()]); //或者这样 //由于在Promise生成时里面的异步代码立刻开始执行 //所以前两行执行完两个异步操作就都已经开始了 //接下来在用await来等待这两个异步完成操作 let fooPromise = getFoo(); let barPromise = getBar(); let foo = await fooPromise; let bar = await barPromise;
异步遍历器
目前,有一个提案,为异步操作提供原生的遍历器接口,即value和done这两个属性都是异步产生,这称为”异步遍历器“(Async Iterator)。异步遍历的接口
异步遍历器的最大的语法特点,就是调用遍历器的next方法,返回的是一个Promise对象。对象的异步遍历器接口,部署在Symbol.asyncIterator属性上面。
const asyncIterable = createAsyncIterable(['a', 'b']); const asyncIterator = asyncIterable[Symbol.asyncIterator](); asyncIterator.next() .then(iterResult1 => { console.log(iterResult1); // { value: 'a', done: false } return asyncIterator.next(); }).then(iterResult2 => { console.log(iterResult2); // { value: 'b', done: false } return asyncIterator.next(); }).then(iterResult3 => { console.log(iterResult3); // { value: undefined, done: true } });
上面代码中,异步遍历器其实返回了两次值。第一次调用的时候,返回一个Promise对象;等到Promise对象resolve了,再返回一个表示当前数据成员信息的对象。这就是说,异步遍历器与同步遍历器最终行为是一致的,只是会先返回Promise对象,作为中介。
由于异步遍历器的next方法,返回的是一个Promise对象。因此,可以把它放在await命令后面,await会等待这个Promise对象执行完,取它传到resolve函数里的值,就不用上面的then方法了。
async function f() { const asyncIterable = createAsyncIterable(['a', 'b']); const asyncIterator = asyncIterable[Symbol.asyncIterator](); console.log(await asyncIterator.next()); // { value: 'a', done: false } console.log(await asyncIterator.next()); // { value: 'b', done: false } console.log(await asyncIterator.next()); // { value: undefined, done: true } }
注意,异步遍历器的next方法是可以连续调用的,不必等到上一步产生的Promise对象resolve以后再调用。这种情况下,next方法会累积起来,自动按照每一步的顺序运行下去。下面是一个例子,把所有的next方法放在Promise.all方法里面。
const asyncGenObj = createAsyncIterable(['a', 'b']); const [{value: v1}, {value: v2}] = await Promise.all([ asyncGenObj.next(), asyncGenObj.next() ]); console.log(v1, v2); // a b
for await…of
async function () { try { for await (const x of createAsyncIterable(['a', 'b'])) { console.log(x); } } catch (e) { console.error(e); } }
上面代码中,createAsyncIterable()返回一个异步遍历器,for…of循环自动调用这个遍历器的next方法,会得到一个Promise对象。await用来处理这个Promise对象,一旦resolve,就把得到的值(x)传入for…of的循环体。
如果next方法返回的Promise对象被reject,那么就要用try…catch捕捉。
异步Generator函数
异步Generator函数的作用,是返回一个异步遍历器对象。在语法上,异步Generator函数就是async函数与Generator函数的结合。
async function* readLines(path) { let file = await fileOpen(path); try { while (!file.EOF) { yield await file.readLine(); } } finally { await file.close(); } } for await (const line of readLines(filePath)) { console.log(line); }
上面代码中,异步操作前面使用await关键字标明,即await后面的操作,应该返回Promise对象。凡是使用yield关键字的地方,就是next方法的停下来的地方,它后面的表达式的值(即await file.readLine()的值),会作为next()返回对象的value属性,这一点是于同步Generator函数一致的。
yield命令依然是立刻返回的,但是返回的是一个Promise对象。
async function* asyncGenerator() { console.log('Start'); const result = await doSomethingAsync(); // (A) yield 'Result: '+ result; // (B) console.log('Done'); }
上面代码中,调用next方法以后,会在B处暂停执行,yield命令立刻返回一个Promise对象。这个Promise对象不同于A处await命令后面的那个Promise对象。主要有两点不同,一是A处的Promise对象resolve以后产生的值,会放入result变量;二是B处的Promise对象resolve以后产生的值,是表达式’Result: ’ + result的值;三是A处的Promise对象一定先于B处的Promise对象resolve。
如果异步Generator函数抛出错误,会被Promise对象reject,然后抛出的错误被catch方法捕获。
async function* asyncGenerator() { throw new Error('Problem!'); } asyncGenerator() .next() .catch(err => console.log(err)); // Error: Problem!
注意,普通的async函数返回的是一个Promise对象,而异步Generator函数返回的是一个异步Iterator对象。async函数和异步Generator函数,是封装异步操作的两种方法,都用来达到同一种目的。区别在于,前者自带执行器,后者通过for await…of执行,或者自己编写执行器。
下面就是一个异步Generator函数的执行器。
async function takeAsync(asyncIterable, count=Infinity) { const result = []; const iterator = asyncIterable[Symbol.asyncIterator](); while (result.length < count) { const {value,done} = await iterator.next(); if (done) break; result.push(value); } return result; }
yield* 语句
yield*语句也可以跟一个异步遍历器。async function* gen1() { yield 'a'; yield 'b'; return 2; } async function* gen2() { const result = yield* gen1(); }
上面代码中,gen2函数里面的result变量,最后的值是2。
与同步Generator函数一样,for await…of循环会展开yield*。
(async function () { for await (const x of gen2()) { console.log(x); } })(); // a // b
相关文章推荐
- es6 async函数实例:按顺序完成异步操作
- ECMAScript 6 学习笔记----异步操作和Async函数
- 异步操作和Async函数
- es6 异步函数 async/awiat 理解
- 第十六节,异步操作和Async函数
- 【ES6】16.generator函数的语法 10.(1)异步操作的同步化表达
- 异步操作和async函数
- es6学习之Generator函数,async函数
- Andorid学习记录—Async异步操作
- .NET异步操作学习之一:Async/Await中异常的处理
- 自学-ES6篇-异步操作和Async函数
- ES6学习14章:异步操作和Async函数
- 学习笔记之资源操作相关函数
- Delphi学习之函数 ④扩展的文件及目录操作函数
- Linux设备驱动程序第三版学习(8)- 高级字符驱动程序操作(续3)- 异步通知 .
- Winform中消息循环、异步操作、Control.Invoke&Control.BeginInvoke学习
- C++学习之:文件目录操作函数
- 前营中间件(5) - 异步发包和客户端的操作函数
- OpenCV学习-常用的图像和矩阵操作函数
- 学习学习 Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)