javascript 中 Promise的使用

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

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

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

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

提前说明一下，接下来的第一个代码片段是我们自己实现的简易版 Promise ，然后第二个代码片段使用了一下我们自己实现的简易版 Promise ;

让读者更清晰的理解 Promise 的设计原理，第三个代码片段就是使用js 自带的 Promise 做个演示；

 var Promise = function() {
     this.callbacks = [];
 }
 Promise.prototype = {

     resolve: function(result) {
         this.complete("resolve", result);
     },

     reject: function(result) {
         this.complete("reject", result);
     },

     complete: function(type, result) {
             while (this.callbacks[0]) {
             this.callbacks.shift()[type](result);
         }
     },

     then: function(successHandler, failedHandler) {
         this.callbacks.push({
             resolve: successHandler,
             reject: failedHandler
         });

         return this;
     }
 }

一个简单的Promise架子就准备好了，下面的来体验一把；

 // 实例化一个 Promise 对象
 var promise = new Promise();

 // 这个函数是一个异步(结果不是马上返回的)函数,可以用ajax代替setTimeout部分

 var delay = function() {
     setTimeout(function() {
         // do something ...
         // 在异步体内发射一个成功或失败的信号,就会对应then里面成功或失败的处理函数
         // 比如这里我们发射处理成功信号到 promise 里面
         promise.resolve('处理成功');
         // promise.reject('处理失败');
     }, 1000);
     // 返回 promise
     return promise;
 };

 // 这个函数用来处理成功信号
 var callback1 = function(re) {
     // do something ...
     alert(re);
 };
 // 这个函数用来处理失败信号
 var callback2 = function(re) {
     // do something ...
     alert(re);
 };
 // then里面传了两个函数,但是最终只会调用一个函数,根据成功或失败的信号来决定调用那个
 // delay里面发射的成功信号就调用 callback1 否则调用 callback2
 delay().then(callback1,callback2);

 // 看上面架子可以知道 promise 对象最后是 return this ;也就是返回的也是 promise
 // 可以实现链式操作  ,比如  delay().then(callback1,callback2).then(callback1,callback2);

js自带的Promise 用法完全一样；

 function loadMusic(url) {

     // Promise 的参数是一个函数  而这个函数里面包含两个参数  这两个参数实际上就是 Promise对象的方法
     // 注意 下面调用 Promise 对象的 then 方法传的两个函数作为参数 两者是对应的
     return new Promise(function(resolve, reject) {

         var audio = new Audio();
         audio.src = url;
         //  当你插入一个audio标签的时候，浏览器要联网加载，根据网络好坏加载到数据的时间就不同
         //  所以这个过程就是异步的，当加载到一定数据能够播放后就会触发这个事件，
         audio.addEventListener('canplay', function() {
             resolve(audio);
         });
         //  比如歌曲地址错误 无法加载到音频  触发这个事件
         audio.addEventListener('error', function(){
             reject("not found!");
         });

     });
 }

 loadMusic('/path/music.mp3').then(function(audio) {

     audio.play();

 }, function(notify) {

     alert(notify);
 });