本文共 3276 字,大约阅读时间需要 10 分钟。
构建一个应用程序总是会面对异步调用,不论是在 Web 前端界面,还是 Node.js 服务端都是如此,JavaScript 里面处理异步调用一直是非常恶心的一件事情。以前只能通过回调函数,后来渐渐又演化出来很多方案,最后 Promise 以简单、易用、兼容性好取胜,但是仍然有非常多的问题。其实 JavaScript 一直想在语言层面彻底解决这个问题,在 ES6 中就已经支持原生的 Promise,还引入了 Generator 函数,终于在 ES7 中决定支持 async 和 await。
async/await 究竟是怎么解决异步调用的写法呢?简单来说,就是将异步操作用同步的写法来写。先来看下最基本的语法(ES7 代码片段):
const f = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(123); }, 2000); });};const testAsync = async () => { const t = await f(); console.log(t);};testAsync();
首先定义了一个函数 f
,这个函数返回一个 Promise,并且会延时 2 秒, resolve
并且传入值 123。 testAsync
函数在定义时使用了关键字 async
,然后函数体中配合使用了 await
,最后执行 testAsync
。整个程序会在 2 秒后输出 123,也就是说 testAsync
中常量 t
取得了 f
中 resolve
的值,并且通过 await
阻塞了后面代码的执行,直到 f
这个异步函数执行完。
仅仅是一个简单的调用,就已经能够看出来 async/await 的强大,写码时可以非常优雅地处理异步函数,彻底告别回调恶梦和无数的 then
方法。我们再来看下与 Promise 的对比,同样的代码,如果完全使用 Promise 会有什么问题呢?
const f = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(123); }, 2000); });};const testAsync = () => { f().then((t) => { console.log(t); });};testAsync();
从代码片段中不难看出 Promise 没有解决好的事情,比如要有很多的 then
方法,整块代码会充满 Promise 的方法,而不是业务逻辑本身,而且每一个 then
方法内部是一个独立的作用域,要是想共享数据,就要将部分数据暴露在最外层,在 then
内部赋值一次。虽然如此,Promise 对于异步操作的封装还是非常不错的,所以 async/await
是基于 Promise 的, await
后面是要接收一个 Promise 实例。
RxJS 也是非常有意思的东西,用来处理异步操作,它更能处理基于流的数据操作。举个例子,比如在 Angular2 中 http 请求返回的就是一个 RxJS 构造的 Observable Object,我们就可以这样做:
$http.get(url) .map(function(value) { return value + 1; }) .filter(function(value) { return value !== null; }) .forEach(function(value) { console.log(value); }) .subscribe(function(value) { console.log('do something.'); }, function(err) { console.log(err); });
如果是 ES6 代码可以进一步简洁:
$http.get(url) .map(value => value + 1) .filter(value => value !== null) .forEach(value => console.log(value)) .subscribe((value) => { console.log('do something.'); }, (err) => { console.log(err); });
可以看出 RxJS 对于这类数据可以做一种类似流式的处理,也是非常优雅,而且 RxJS 强大之处在于你还可以对数据做取消、监听、节流等等的操作,这里不一一举例了,感兴趣的话可以去看下 RxJS 的 API。
这里要说明一下的就是 RxJS 和 async/await 一起用也是可以的,Observable Object 中有 toPromise
方法,可以返回一个 Promise Object,同样可以结合 await
使用。当然你也可以只使用 async/await 配合 underscore 或者其他库,也能实现很优雅的效果。总之,RxJS 与 async/await 不冲突。
通过使用 async/await,我们就可以配合 try/catch 来捕获异步操作过程中的问题,包括 Promise 中 reject 的数据。
const f = () => { return new Promise((resolve, reject) => { setTimeout(() => { reject(234); }, 2000); });};const testAsync = async () => { try { const t = await f(); console.log(t); } catch (err) { console.log(err); }};testAsync();
代码片段中将 f
方法中的 resolve
改为 reject
,在 testAsync
中,通过 catch
可以捕获到 reject
的数据,输出 err 的值为 234。 try/catch
使用时也要注意范围和层级。如果 try
范围内包含多个 await
,那么 catch
会返回第一个 reject
的值或错误。
const f1 = () => { return new Promise((resolve, reject) => { setTimeout(() => { reject(111); }, 2000); });};const f2 = () => { return new Promise((resolve, reject) => { setTimeout(() => { reject(222); }, 3000); });};const testAsync = async () => { try { const t1 = await f1(); console.log(t1); const t2 = await f2(); console.log(t2); } catch (err) { console.log(err); }};testAsync();
如代码片段所示, testAsync
函数体中 try
有两个 await
函数,而且都分别 reject
,那么 catch
中仅会触发 f1
的 reject
,输出的 err 值是 111。
转载地址:http://qurni.baihongyu.com/