时间:2021-05-26
网页的交互越来越复杂,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,撇开其内部使用,这应该用户使用率最低的一个模块了,这和其较复杂的使用方式有一定的关系。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了AngularJS中的promise用法。分享给大家供大家参考,具体如下:JavaScript异步回调有好处也有坏处,回调函数大量嵌套十分复杂.所
前言在几年前,回调是JavaScript中实现执行异步代码的唯一方法。回调本身几乎没有什么问题,最值得注意的是“回调地狱”。在ES6中引入了Promise作为这
解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Promise交互的主要方式是通过他的then()方法来注册回调函数
前言异步操作是JavaScript编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。从最早的回调函数,到Promise对象,再到Generato
本文实例讲述了ES6中异步对象Promise用法。分享给大家供大家参考,具体如下:回忆一下ES5中的怎么使用异步方法//es5中的异步回调letajax=fun