有点经验的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); });
