JavaScript异步操作汇总
2017-07-09 20:20
531 查看
概述
Javascript语言的执行环境是”单线程”(single thread)。所以异步编程对 JavaScript 语言太重要。如果没有异步编程,根本没法用,非卡死不可。本文介绍js中三种不同的异步方式,Promise, Generator, Async。通过对比三种异步方式的特点,让大家更加优雅地使用异步操作。在ES6之前是怎么写异步操作的:
我们用setTimeOut来做模拟异步
function mockAsync(cb, time) { console.log("before aync......."); setTimeout(()=>{ console.log("after aync.......") cb(); }, time) }
上面是只有一个异步,如果我们想要串行执行一些事情,那么代码就要这么写
mockAsync(()=>{ console.log("mock async 1") mockAsync(()=>{ console.log("mock async 2") mockAsync(()=>{ console.log("mock async 3") mockAsync(()=>{ console.log("mock async 4") }, 1000) }, 1000) }, 1000) }, 1000)
这样在回调里执行回调,就是传说中的回调地狱
通过回调实现异步,优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),使得程序结构混乱、流程难以追踪(尤其是回调函数嵌套的情况),而且每个任务只能指定一个回调函数。
Promise
promise本身并没有解决回调地狱的问题,它的本质仍然是传递回调,例如上面的例子,用promise写是这样的function usePromise(time){ console.log("before async......."); return new Promise((resolve, reject)=>{ console.log("11111"); setTimeout(()=>{ console.log("after async.......") resolve(); }, time) }); } usePromise(1000).then(()=>{ console.log("use promise"); })
输出:
before async....... 11111 after async....... use promise
我们继续实现串行异步,代码就会是这样
usePromise(1000).then(()=>{ console.log("use promise 1"); usePromise(1000).then(()=>{ console.log("use promise 2"); usePromise(1000).then(()=>{ console.log("use promise 3"); usePromise(1000).then(()=>{ console.log("use promise 4"); }) }) }) })
但是promise并没有这么笨,所以它做了一些改进,这样写会好看很多
usePromise(1000).then(()=>{ console.log("use promise 1"); return usePromise(1000); }).then(()=>{ console.log("use promise 2"); return usePromise(1000); }).then(()=>{ console.log("use promise 3"); return usePromise(1000); }).then(()=>{ console.log("use promise 4"); })
这是基于promise的一项特性,那就是then和catch方法都是返回了一个新的promise,我们暂时称他为p1, p1这个promise会在什么时候改变状态呢?如果在then或者catch方法return了一个普通对象(没有return语句相当于return undefined),那么p1的状态会马上改变。如果then或者catch方法return了一个promise p2,那么只有当p2的状态改变了,p1的状态才会改变。
所以这个代码就好理解了,这就是利用在then函数里return一个新的promise,之后的then就是依次处理前一个promise的。
关于then和catch的细节,以及promise.all() promise.race, promise.resolve, promise.reject可以参考阮一峰的教程。
Generator
Promise并没有改变异步的实现方式,他还是通过传递回调实现的。但Generator改变了异步的实现方式,generator可以将异步的代码以同步的方式来实现,很好地实现了异步操作的流程控制。function* useGenerator(){ yield console.log("use generator 1"); yield console.log("use generator 2"); yield console.log("use generator 3"); yield console.log("use generator 4"); }
普通的函数想要实现异步,必须通过回调,因为普通的函数会一直执行到return语句,然后整个函数结束。
generator函数只有调用next语句才会执行,每次执行到yield语句为止,然后在需要的时候再次调用next语句,从上次结束的位置继续执行。
上面代码中,操作都是立即执行,所以虽然是异步,但看起来不像,所以我们在它的基础上写一个看起来更像异步的,仍然用setTimeout来模拟异步
function delay(time) { console.log("in delay..."); return new Promise((resolve)=>{ setTimeout(()=>{ console.log("will resolve"); resolve("aaa"); }, time); }); } function* useGenerator1(){ console.log("use generator 1") let a = yield delay(1000); console.log("test sign"); console.log("use generator 2") let b = yield delay(1000); console.log("use generator 3") let c = yield delay(1000); console.log("use generator 4") let d = yield delay(1000); } let iter = useGenerator1(); let result = iter.next(); console.log("before async....."); result.value.then(()=>{ console.log("after async.....2"); iter.next(); })
打印结果
use generator 1 in delay... before async..... (1s之后) will resolve after async.....2 test sign use generator 2 in delay... (1s之后) will resolve
我们通过yield返回一个promise,当这个promise改变状态后,执行这个generator函数的next方法。我们可以把所有的异步操作都想象成是一个promise,显然promise改变状态前和改变状态后执行的代码,在generator函数里是连续写着的,就像同步代码一样,只要在每次需要中断的时候使用yield语句就可以了。
如果想要generator函数自动执行完,需要实现thunk函数,例如如下代码,这个属于稍微高端的玩法,暂时可以先忽略。
function thunk(iter) { let result = iter.next(); if(result.done) { return; } result.value.then(()=>{ thunk(iter); }); } let iter = useGenerator1(); thunk(iter);
打印结果
use generator 1 in delay... will resolve test sign use generator 2 in delay... will resolve use generator 3 in delay... will resolve use generator 4 in delay... will resolve
async
async和await是ES2017的内容,他们可以看做完全是generator函数的语法糖,async相当于*, await相当于yield。不同的是aync函数会自动执行,直到return(前面说过,没有return语句等于return undefined)。也就是实现了我们上面写的thunk。async function useAsync(){ console.log("use generator 1") await delay(1000).then(()=>{ }); console.log("use generator 2") await delay(1000); console.log("use generator 3") await delay(1000); console.log("use generator 4") await delay(1000); } console.log("before async....."); useAsync().then((result)=>{ console.log("after async....."+ result); }).catch();
打印信息
before async..... use generator 1 in delay... will resolve use generator 2 in delay... will resolve use generator 3 in delay... will resolve use generator 4 in delay... will resolve after async.....undefined
async函数返回的是一个promise,它的then函数回调参数就是async函数return的值,如果代码发生异常或者await的promise进入reject状态,则返回的promise也立即进入reject状态。
正常情况下await后面是一个promise对象,如果不是,则会转为一个立即resolve的promise对象。
多个await的promise,相当于promise.all(),也就是需要所有的promise都resolve之后,整体才进入resolve状态,任何一个进入reject,则立即进入reject。注意的是此时async函数后面的代码就没有机会执行了。
特别感谢同事@yangguang
相关文章推荐
- 常用的 Javascript 操作汇总
- Microsoft .NET Framework 2.0对文件传输协议(FTP)操作(异步上传,下载等)实现汇总2
- JavaScript数组常用操作技巧汇总
- JavaScript数组操作函数汇总
- JavaScript中字符串的常用操作汇总
- 常用的 Javascript 操作汇总 (一)
- Promise—javascript异步操作的潮流
- javascript常见操作汇总
- javascript常见操作汇总
- javascript-解决mongoose数据查询的异步操作
- Microsoft .NET Framework 2.0对文件传输协议(FTP)操作(异步上传,下载等)实现汇总2
- Javascript 时间操作汇总
- Javascript 时间操作汇总
- JavaScript数组常用操作技巧汇总
- JavaScript数组对象常用操作汇总
- 常用的 Javascript 操作汇总 (二)
- javascript 通过ajax实现服务器异步数据操作
- javascript列表框操作函数集合汇总
- JavaScript中常见的字符串操作函数及用法汇总
- 谈一谈几种处理JavaScript异步操作的办法