javascript 中 Promise的使用

发布时间:2017-1-19 8:19:07 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"javascript 中 Promise的使用 ",主要涉及到javascript 中 Promise的使用 方面的内容,对于javascript 中 Promise的使用 感兴趣的同学可以参考一下。

有点经验的js前端都知道  ajax异步函数里面的结果不会立即返回,如果你想在一个异步函数得到某个结果后去执行一个语句怎么做?

if ( 异步函数 ) { 语句 }  可能很多人都踩过这样坑,这个时候新手一般都找不到问题,左看右看上看下看都是绝对完美的,找不到任何错误;

懂得人就会 把 这句话 放到异步里面去;这样做就没有问题了;但是如果异步里面判断结果后又要做一个异步,里面继续嵌套几个异步......这种情况是常见的;

所以其实 promise 就是以一种优雅的方式来解决这个问题;

提前说明,这篇文章只说怎么用,至于原理什么的请阅读其他更详细的文档;

 1 var Promise = function() { 2     this.callbacks = []; 3 } 4 Promise.prototype = { 5  6     resolve: function(result) { 7         this.complete("resolve", result); 8     }, 9 10     reject: function(result) {11         this.complete("reject", result);12     },13 14     complete: function(type, result) {15             while (this.callbacks[0]) {16             this.callbacks.shift()[type](result);17         }18     },19 20     then: function(successHandler, failedHandler) {21         this.callbacks.push({22             resolve: successHandler,23             reject: failedHandler24         });25 26         return this;27     }28 }

首先你准备好上面的架子,放到最前面,你可以一个字母都不改动;

下面来使用一下 Promise ;

 1 // 实例化一个 Promise 对象 2 var promise = new Promise(); 3  4 // 这个函数是一个异步(结果不是马上返回的)函数,可以用ajax代替setTimeout部分 5  6 var delay = function() { 7     setTimeout(function() { 8         // do something ... 9         // 在异步体内发射一个成功或失败的信号,就会对应then里面成功或失败的处理函数10         // 比如这里我们发射处理成功信号到 promise 里面11         promise.resolve('处理成功');12         // promise.reject('处理失败');13     }, 1000);14     // 返回 promise15     return promise;16 };17 18 // 这个函数用来处理成功信号19 var callback1 = function(re) {20     // do something ...21     alert(re);22 };23 // 这个函数用来处理失败信号24 var callback2 = function(re) {25     // do something ...26     alert(re);27 };28 // then里面传了两个函数,但是最终只会调用一个函数,根据成功或失败的信号来决定调用那个29 // delay里面发射的成功信号就调用 callback1 否则调用 callback230 delay().then(callback1,callback2);31 32 // 看上面架子可以知道 promise 对象最后是 return this ;也就是返回的也是 promise33 // 可以实现链式操作  ,比如  delay().then(callback1,callback2).then(callback1,callback2);

上一篇:移动web资源整理
下一篇:简单工厂模式

相关文章

相关评论