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

日期：2020-05-11 栏目：程序人生浏览：次

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

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();

转载注明出处：http://www.heiqu.com/1180.html

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

相关推荐