JS异步那些事 三 (Promise)

JS异步那些事 一 (基础知识)
JS异步那些事 二 (分布式事宜)
JS异步那些事 三 (Promise)
JS异步那些事 四(HTML 5 Web Workers)
JS异步那些事 五 (异步剧本加载)

Promise,Deferred 对象

前戏

先来谈谈jquery中的promise的运用,来看一个例子
底本写一个小动画我们多是如许的

<script type="text/javascript"> 
$('.animateEle').animate({
  opacity:'.5'
}, 4000,function(){
  $('.animateEle2').animate({
    width:'100px'
  },2000,function(){
    $('.animateEle3').animate({
      height:'0'
    },2000);
  });
});
</script> 

然则假如我们运用promis对象的话,就能够使得代码越发简朴易懂

<script type="text/javascript"> 
var animate1 = function() {
  return $('.animateEle1').animate({opacity:'.5'},4000).promise();
};
var animate2 = function() {
  return $('.animateEle2').animate({width:'100px'},2000).promise();
};
var animate3 = function(){
  return $('.animateEle3').animate({height:'0'},2000).promise();
};
$.when(animate1()).then(animate2).then(animate3);
</script>

看了上面的例子也许对promise的作用有肯定的相识了吧,那就来说说promis的道理吧

Promise对象要领

关于DOM,动画,ajax相干要领,都能够运用 promise 要领。挪用 promise 要领,返回的是 promise 对象。能够链式挪用 promise 要领。

比方jquery中的ajax的 $.post $.get $.ajax 等要领,实际上都是默许挪用了promise要领,然后返回了一个promise对象

promise对象罕见的要领有三个 : done , fail , then 。

<script type="text/javascript"> 
$.get('/',{}).done(function(data){
    console.log('success');
}).fail(function(){
    console.log('fail');
});
</script>

jquery 这里的接口要领太多了,就跟初期的事宜要领绑定一样, live , delegate , bind ,终究照样归为 on

deferred对象要领

deferred 对象呢,也就是运用 $.Deferred() 要领,以及 $.when() 等要领制造出来的对象,它能够理解为一个升级版特别的的promise对象
来看看一个例子

  <script type="text/javascript"> 
  var  promisepbj = new $.Deferred();

     promisepbj.done(function() {
      console.log('haha,done');
    }).fail(function() {
      console.log('失利了');
    }).always(function(res) {
      console.log('我老是被实行啦');
    });

    //运用resolve或许reject就能够挪用defferred对象了
    promisepobj.resolve();
    //promisepobj.reject();

resolve 要领会触发 done 的回调实行, reject 会触发 fail 的回调,关于 always 要领,deferred 对象,无论是 resolve 照样 reject ,都邑触发该要领的回调。

ES6 Promise

前面讲了许多jquery的promise完成,$.Deferred 和 ES2015 的 Promise 是差别的东西,由于前者不符合 Promises/A+ 范例。 Promise 对象在 EMCAScript 2015 当中已经成为规范。如今要来谈谈立时要成为主流趋向的es6原生promise对象,起首贴一个很细致的es6 promise的小书,基础你晓得的不晓得都在内里 http://liubin.org/promises-book/#introduction

把promise诠释的很清晰的文章许多,我自认为我写不到他们那末好,痛快痛快把阮一峰大神的文章贴出来 http://es6.ruanyifeng.com/#docs/promise
我就来个简化版本的吧,用最短的字数来入个门。

定义:

谓Promise,简朴说就是一个容器,内里保存着某个将来才会完毕的事宜(通常是一个异步操纵)的效果。
特性:

  1. 有三种状况:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失利)。

  2. 一旦状况转变,就不会再变,任何时候都能够获得这个效果。Promise对象的状况转变,只需两种能够:从Pending变成Resolved和从Pending变成Rejected。只需这两种状况发作,状况就凝结了

基础用法

  <script type="text/javascript"> 
var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操纵胜利 */){
    resolve(value);
  } else {
    reject(error);
  }
});
</script>

Promise组织函数接收一个函数作为参数,该函数的两个参数分别是resolve和reject。

  <script type="text/javascript"> 
function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});
</script>

上面代码中,timeout要领返回一个Promise实例,示意一段时候今后才会发作的效果。过了指定的时候(ms参数)今后,Promise实例的状况变成Resolved,就会触发then要领绑定的回调函数。

异常处置惩罚

  异常处置惩罚一直是回调的困难,而promise供应了异常轻易的catch要领:在一次promise挪用中,任何的环节发作reject,都能够在终究的catch中捕获到:

Promise.resolve().then(function(){
    return loadImage(img1);
}).then(function(){
    return loadImage(img2);
}).then(function(){
    return loadImage(img3);
}).catch(function(err){
    //错误处置惩罚
})

基础的 api

Promise.resolve()
Promise.reject()
Promise.prototype.then()
Promise.prototype.catch()
Promise.all()
Promise.race()

小结

详细的许多的用法能够参考阮一峰的 http://es6.ruanyifeng.com/#docs/promise 入门教程,另有就是上面提到的电子书 http://liubin.org/promises-book/#introduction

    原文作者:outshineamaze
    原文地址: https://segmentfault.com/a/1190000005081754
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞