ES6 JavaScript Promise的插件封装–promise.js

js 回调异步加载回到

Promise只是一种代码形式，让我们的代码更简洁、易读懂，更好维护而已。

不像传统的JS代码一个层层的嵌套，看着乱。

//传统回调

$('div1').animate({},function(){
  $('div2').animate({},function(){
     $('div3').animate({},function(){
         $('div4').animate({},function(){});
     })
  });
});

传统代码是不是看着心烦。

使用Promise形式虽然也是嵌套，但是看着舒服也易读懂

Promise($('div1'))
  .then(function() { $('div2') }) 
  .then(function() { $('div3') }) 
  .then(function() { $('div4') });

在此之前也介绍过几个不错的Promise插件，如：

《JavaScript异步编程插件–jsDeferred.js》
《jquery Deferred对象延迟对象》
《js异步模块以及回调–async.js》
在ES6中新加了Promise的机制，但是对于低版本的浏览器不兼容，所以有了promise.js，它可以兼容IE7以上浏览器。

（你可以使用ES6新语法写，但是这样就不会兼容IE7那些低版本浏览器了）

Promise.all([])  //总是在最后才被执行

var promise1 = Promise.resolve(3);

Promise.all([function(){i++;document.title=i+'---';},promise1]).then(function(values){
 (values[0])();   //2  虽然在声明变量i的前面，但是总在最后执行所以能获取到i变量
 console.log(values[1]);  // 获取到的是promise1的值
});


var i=0; 
++i;

...
...
不管这里代码多少Promise.all永远在最后才执行

//Promise.all即使放在声明变量的前面，但是执行的顺序是等待其他JS执行完成后才能执行

Promise.race //最快的先执行

var p1 = new Promise(function(resolve, reject) {
 setTimeout(resolve, 500, function(){document.getElementById('box1').style.background='yellow'});
});
var p2 = new Promise(function(resolve, reject) {
 setTimeout(resolve, 100, function(){document.getElementById('box2').style.background='#000'});
});

 Promise.race([p1, p2]).then(function(value) {
   (value)();
   //最快的先执行
 });

使用方法：

.then(function(){},function(){}) //第一个成功回调处理，第二个是失败会懂啊处理

Promise.resolve(value) //返回一个value值，此值是激活成功状态下执行的。
Promise.reject(reason) //激活失败

Promise.all([]).then // 收集数组里的值，并执行回调
Promise.race([]).then //获取最先返回的值，就立马回调

如果想使用done()方法，那还需要加载promise-done-7.0.4.min.js

具体参考官网：https://www.promisejs.org/

promise-7.0.4.min

ES6 JavaScript Promise的插件封装--promise.js