使用Promise模式来简化JavaScript的异步回调

网页的交互越来越伟大，JavaScript 的异步操纵也随之越来越多。如常见的 ajax 哀求，必要在哀求完成时相应操纵，哀求凡是是异步的，哀求的进程顶用户还能举办其他的操纵，不会对页面举办阻塞，这种异步的交互结果对用户来说是挺有友爱的。可是对付开拓者来说，要大量处理赏罚这种操纵，就很不友爱了。异步哀求完成的操纵必需预先界说在回调函数中，比及哀求完成绩必需挪用这个函数。这种非线性的异步编程方法会闪开拓者很不顺应，同时也带来了诸多的未便，增进了代码的耦合度和伟大性，代码的组织上也会很不优雅，大大低落了代码的可维护性。环境再伟大点，假如一个操纵要比及多个异步 ajax 哀求的完成才气举办，就会呈现回调函数嵌套的环境，假如必要嵌套好几层，那你就只能自求多福了。

先看看下面这个常见的异步函数。

var showMsg = function（）{

setTimeout（function（）{

alert（ ‘hello’ ）;

}， 5000 ）;

};

假如要给该函数添加回调，凡是会这么干。

var showMsg = function（ callback ）{

setTimeout（function（）{

alert（ ‘hello’ ）;

// 此处添加回调

callback（）;

}， 5000 ）;

};

假如是行使 easy.js 的 Promise，添加回调的要领就会优雅多了，条件是必要将原函数封装成一个 promise 实例。

var showMsg = function（）{

// 结构promise实例

var promise = new E.Promise（）;

setTimeout（function（）{

alert（ ‘hello’ ）;

// 改变promise的状态

promise.resolve（ ‘done’ ）;

}， 5000 ）;

// 返回promise实例

return promise;

};

将一个平凡的函数封装成一个 promise 实例，有3个要害步调，第一步是在函数内部结构一个 promise 实例，第二步是陈设函数执行完去改变 promise 的状态为已完成，第三步就是返回这个 promise 实例。每个 promise 实例都有3种状态，别离为 pending(未完成)、resolved(已完成，乐成)、rejected(已拒绝，失败)。下面再来看看怎样添加回调。

showMsg（）.then（function（ str ）{

// 回调添加到这里来了

callback（ str ）;

}）;

这样就将回调函数和原本的异步函数彻底的疏散了，从代码组织上看，优雅了许多。resolve 接管一个参数，该参数就可以轻松实现将数据传送给行使 then 要领添加的回调中。

对付 ajax 哀求，easy.js 直接将 ajax 要领封装成了 promise 工具，可以直接添加 then 要领往返调。

E.ajax（{

url ： ‘test1.php’，

type ： ‘GET’

}）

then（function（）{

// 添加哀求乐成的回调

}， function（）{

// 添加哀求失败的回调

}）;

then 要领接管2个函数作为参数，第一个函数是已完成的回调，第二个就是已失败的回调。

假若有上面提到的多个 ajax 哀求的环境呢？那么就要用到 when 这个要领了。该要领可以接管多个 promise 实例作为参数。

var requests = E.when（E.ajax（{

url ： ‘test1.php’，

type ： ‘GET’

}）， E.ajax（{

url ： ‘test2.php’，

type ： ‘GET’

}））;

requests.then（function（ arg1， arg2 ）{

console.log（ ‘success：’ + arg1［0］ + arg2［0］ ）;

}， function（ arg1， arg2 ）{

console.log（ ‘failure：’ + arg1 + arg2 ）;

}）;

when 要领是将多个 promise 实例存到一个数组中，比及该数组的全部 promise 实例都是已完成状态才去执行已完成的回调，一旦有一个实例是已拒绝的状态，则当即执行已拒绝的回调。

Promise 模式是 CommonJS 的类型之一。许多主流的 JavaScript 库都有响应的实现，如 jQuery 和 Dojo 中，都有 Deferred 去实现这些成果。在这里照旧要吐槽下 jQuery 的 Deferred，撇开其内部行使，这应该用户行使率最低的一个模块了，这和其较伟大的行使方法有必然的相关。

假如你想深入的研究 easy.js 的 promise 源码，可以查察点击这儿的链接。

文章来历：夜雨带刀博客

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!