ES7中利用Await减少回调嵌套的方法详解


Posted in Javascript onNovember 01, 2017

前言

我们知道javascript是没办法阻塞的,所有的等待只能通过回调来完成,这就造成了回调嵌套的问题,导致代码乱到爆,这时候Await就有用处了。

对于await的底层机制这里就不详述了,以免将文章的篇幅拖的很长,需要的朋友们可以参考这篇文章:https://3water.com/article/123257.htm,下面开始本文的正式内容。

利用Await减少回调嵌套

我们大家在开发的时候,有时候需要发很多请求,然后经常会面临嵌套回调的问题,即在一个回调里面又嵌了一个回调,导致代码层层缩进得很厉害。

如下代码所示:

ajax({
 url: "/list",
 type: "GET",
 success: function(data) {
 appendToDOM(data);
 ajax({
 url: "/update",
 type: "POST",
 success: function(data) {
 util.toast("Success!");
 })
 });
 }
});

这样的代码看起来有点吃力,这种异步回调通常可以用Promise优化一下,可以把上面代码改成:

new Promise(resolve => {
 ajax({
 url: "/list",
 type: "GET",
 success: data => resolve(data);
 })
}).then(data => {
 appendToDOM(data);
 ajax({
 url: "/update",
 type: "POST",
 success: function(data) {
 util.toast("Successfully!");
 }) 
 }); 
});

Promise提供了一个resolve,方便通知什么时候异步结束了,不过本质还是一样的,还是使用回调,只是这个回调放在了then里面。

当需要获取多次异步数据的时候,可以使用Promise.all解决:

let orderPromise = new Promise(resolve => {
 ajax("/order", "GET", data => resolve(data));
});
let userPromise = new Promise(resolve => {
 ajax("/user", "GET", data => resolve(data));
});

Promise.all([orderPromise, userPromise]).then(values => {
 let order = values[0],
 user = values[1];
});

但是这里也是使用了回调,有没有比较优雅的解决方式呢?

ES7的await/async可以让异步回调的写法跟写同步代码一样。第一个嵌套回调的例子可以用await改成下面的代码:

// 使用await获取异步数据
let leadList = await new Promise(resolve => {
 ajax({
 url: "/list",
 type: "GET",
 success: data => resolve(data);
 });
});

// await让代码很自然地像瀑布流一样写下来 
appendToDom(leadList);
ajax({
 url: "/update",
 type: "POST",
 success: () => util.toast("Successfully");
});

Await让代码可以像瀑布流一样很自然地写下来。

第二个例子:获取多次异步数据,可以改成这样:

let order = await new Promise(
 resolve => ajax("/order", data => resovle(data))),

 user = await new Promise(
 resolve => ajax("/user", data => resolve(data)));

// do sth. with order/user

这种写法就好像从本地获取数据一样,就不用套回调函数了。

Await除了用在发请求之外,还适用于其它异步场景,例如我在创建订单前先弹一个小框询问用户是要创建哪种类型的订单,然后再弹具体的设置订单的框,所以按正常思路这里需要传递一个按钮回调的点击函数,如下图所示:

ES7中利用Await减少回调嵌套的方法详解

但其实可以使用await解决,如下代码所示:

let quoteHandler = require("./quote");
// 弹出框询问用户并得到用户的选择
let createType = await quoteHandler.confirmCreate();

quote里面返回一个Promise,监听点击事件,并传递createType:

let quoteHandler = {
 confirmCreate: function(){
 dialog.showDialog({
 contentTpl: tpl,
 className: "confirm-create-quote"
 });
 let $quoteDialog = $(".confirm-create-quote form")[0];
 return new Promise(resolve => {
 $(form.submit).on("click", function(event){
 resolve(form.createType.value);
 });
 });
 }

}

这样外部调用者就可以使用await,而不用传递一个点击事件的回调函数了。

但是需要注意的是await的一次性执行特点。相对于回调函数来说,await的执行是一次性的,例如监听点击事件,然后使用await,那么点击事件只会执行一次,因为代码从上往下执行完了,所以当希望点击之后出错了还能继续修改和提交就不能使用await,另外使用await获取异步数据,如果出错了,那么成功的resolve就不会执行,后续的代码也不会执行,所以请求出错的时候基本逻辑不会有问题。

要在babel里面使用await,需要:

(1)安装一个Node包

npm install --save-dev babel-plugin-transform-async-to-generator

(2)在工程的根目录添加一个.babelrc文件,内容为:

{
 "plugins": ["transform-async-to-generator"]
}

(3)使用的时候先引入一个模块

require("babel-polyfill");

然后就可以愉快地使用ES7的await了。

使用await的函数前面需要加上async关键字,如下代码:

async showOrderDialog() {
 // 获取创建类型
 let createType = await quoteHandler.confirmCreate();

 // 获取老订单数据 
 let orderInfo = await orderHandler.getOrderData();
}

我们再举一个例子:使用await实现JS版的sleep函数,因为原生是没有提供线程休眠函数的,如下代码所示:

function sleep (time) {
 return new Promise(resolve => 
 setTimeout(() => resolve(), time));
}

async function start () {
 await sleep(1000);
}

start();

babel的await实现是转成了ES6的generator,如下关键代码:

while (1) {
 switch (_context.prev = _context.next) {
 case 0:
 _context.next = 2;
 // sleep返回一个Promise对象
 return sleep(1000);

 case 2:
 case "end": 
 return _context.stop();
 }
}

而babel的generator也是要用ES5实现的,什么是generator呢?如下图所示:

ES7中利用Await减少回调嵌套的方法详解

生成器用function*定义,每次执行生成器的next函数的时候会返回当前生成器里用yield返回的值,然后生成器的迭代器往后走一步,直到所有yield完了。

有兴趣的可以继续研究babel是如何把ES7转成ES5的,据说原生的实现还是直接基于Promise.

使用await还有一个好处,可以直接try-catch捕获异步过程抛出的异常,因为我们是不能直接捕获异步回调里面的异常的,如下代码:

let quoteHandler = {
 confirmCreate: function(){
 $(form.submit).on("click", function(event){
 // 这里会抛undefined异常:访问了undefined的value属性
 callback(form.notFoundInput.value);
 });
 }
}

try {
 // 这里无法捕获到异常
 quoteHandler.confirmCreate();
} catch (e) {

}

上面的try-catch是没有办法捕获到异常的,因为try里的代码已经执行完了,在它执行的过程中并没有异常,因此无法在这里捕获,如果使用Promise的话一般是使用Promise链的catch:

let quoteHandler = {
 confirmCreate: function(){
 return new Promise(resolve => {
 $(form.submit).on("click", function(event){
 // 这里会抛undefined异常:访问了undefined的value属性
 resolve(form.notFoundInput.value);
 });
 });
 }
}

quoteHandler.confirmCreate().then(createType => {

}).catch(e => {
 // 这里能捕获异常
});

而使用await,我们可以直接用同步的catch,就好像它真的变成同步执行了:

try {
 createType = await quoteHandler.confirmCreate("order");
}catch(e){
 console.log(e);
 return;
}

总之使用await让代码少写了很多嵌套,很方便的逻辑处理,纵享丝滑。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
jquery实现数字输入框
Feb 22 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 #Javascript
bootstrap Table的一些小操作
Nov 01 #Javascript
react-native fetch的具体使用方法
Nov 01 #Javascript
Vue异步加载about组件
Oct 31 #Javascript
微信小程序顶部可滚动导航效果
Oct 31 #Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 #Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 #Javascript
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
wordpress之wp-settings.php
2007/08/17 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
Prototype Array对象 学习
2009/07/19 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
js select常用操作控制代码
2010/03/16 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python文件和目录操作函数小结
2014/07/11 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python两个list[]相加的实现方法
2020/09/23 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏