媒介

Promise，置信每个前端工程师都或多或少地在项目中都是用过，毕竟它早已不是一个新名词。ES6中已原生对它加以支撑，在caniuse中搜刮一下Promise，发明新版的chrome和firefox也已支撑。然则低版本的浏览器我们能够运用es6-promise这个polyfill库来加以兼容。

临时不谈await、async，在Google或百度或360搜刮等搜刮引擎、或许在segmentfault等社区中，我们能够搜到一大把引见promise的文章，毕竟它已涌现了很长时候，早已有许多大神剖析解说过。

我也看了一些文章，然则觉得都没有到达想要的效果。所以决议本身开一个小系列文章进修解说一下promise的道理，以及完成，末了再谈一谈与之联络亲昵的Deferred对象。

本文是该系列的第一篇文章，重要先让人人对Promise有一个基础的熟悉。

promise简介

Promise的涌现，底本是为了处置惩罚回调地狱的题目。一切人在解说Promise时，都邑以一个ajax要求为例，此处我们也用一个简朴的ajax的例子来带人人看一下Promise是怎样运用的。

ajax要求的传统写法：

getData(method, url, successFun, failFun){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open(method, url);
  xmlHttp.send();
  xmlHttp.onload = function () {
    if (this.status == 200 ) {
      successFun(this.response);
    } else {
      failFun(this.statusText);
    }
  };
  xmlHttp.onerror = function () {
    failFun(this.statusText);
  };
}

改成promise后的写法：

getData(method, url){
  var promise = new Promise(function(resolve, reject){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(method, url);
    xmlHttp.send();
    xmlHttp.onload = function () {
      if (this.status == 200 ) {
        resolve(this.response);
      } else {
        reject(this.statusText);
      }
    };
    xmlHttp.onerror = function () {
      reject(this.statusText);
    };
  })
  return promise;
}

getData('get','www.xxx.com').then(successFun, failFun)

很显然，我们把异步中运用回调函数的场景改成了.then()、.catch()等函数链式挪用的体式格局。基于promise我们能够把庞杂的异步回调处置惩罚体式格局举行模块化。

下面，我们就来引见一下Promise究竟是个什么东西？它是怎样做到的？

Promise的道理剖析

实在promise道理说起来并不难，它内部有三个状况，离别是pending，fulfilled和rejected 。

pending是对象建立后的初始状况，当对象fulfill（胜利）时变成fulfilled，当对象reject（失利）时变成rejected。且只能从pengding变成fulfilled或rejected ，而不能逆向或从fulfilled变成rejected 、从rejected变成fulfilled。如图所示：

Promise实例要领引见

Promise对象具有两个实例要领then()和catch()。

夙昔面的例子中能够看到，胜利和失利的回调函数我们是经由过程then()增加，在promise状况转变时离别挪用。promise组织函数中一般都是异步的，所以then要领每每都先于resolve和reject要领实行。所以promise内部须要有一个存储fulfill时挪用函数的数组和一个存储reject时挪用函数的数组。

从上面的例子中我们还能够看到then要领能够吸收两个参数，且一般都是函数（非函数时怎样处置惩罚下一篇文章中会细致引见）。第一个参数会增加到fulfill时挪用的数组中，第二个参数增加到reject时挪用的数组中。当promise状况fulfill时，会把resolve(value)中的value值传给挪用的函数中，同理，当promise状况reject时，会把reject(reason)中的reason值传给挪用的函数。例：

var p = new Promise(function(resolve, reject){
    resolve(5)
}).then(function(value){
    console.log(value) //5
})

var p1 = new Promise(function(resolve, reject){
    reject(new Error('毛病'))
}).then(function(value){
    console.log(value)
}, function(reason){
    console.log(reason) //Error: 毛病(…)
})

then要领会返回一个新的promise，下面的例子中p == p1将返回false,申明p1是一个全新的对象。

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(function(value){
    console.log(value)
})
p == p1 // false

这也是为何then是能够链式挪用的，它是在新的对象上增加胜利或失利的回调，这与jQuery中的链式挪用差别。

那末新对象的状况是基于什么转变的呢？是不是说假如p的状况fulfill，背面的then建立的新对象都邑胜利；或许说假如p的状况reject，背面的then建立的新对象都邑失利？

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(function(value){
    console.log(value)   // 5
}).then(function(value){
    console.log('fulfill ' + value)   // fulfill undefined
}, function(reason){
    console.log('reject ' + reason)   
})

上面的例子会打印出5和”fulfill undefined”申明它的状况变成胜利。那假如我们在p1的then要领中抛出非常呢？

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(function(value){
    console.log(value)   // 5
    throw new Error('test')
}).then(function(value){
    console.log('fulfill ' + value)
}, function(reason){
    console.log('reject ' + reason)   // reject Error: test
})

天经地义，新对象肯定会失利。

反过来假如p失利了，会是什么样的呢？

var p = new Promise(function(resolve, reject){
    reject(5)
})
var p1 = p.then(undefined, function(value){
    console.log(value)   // 5
}).then(function(value){
    console.log('fulfill ' + value)   // fulfill undefined
}, function(reason){
    console.log('reject ' + reason)
})

申明新对象状况不会遭到前一个对象状况的影响。

再来看以下代码：

var p = new Promise(function(resolve, reject){
    reject(5)
})
var p1 = p.then(function(value){
    console.log(value) 
})
var p2 = p1.then(function(value){
    console.log('fulfill ' + value)
}, function(reason){
    console.log('reject ' + reason)   // reject 5
})

我们发明p1的状况变成rejected，从而触发了then要领第二个参数的函数。这好像与我们之前提到的有差别啊，p1的状况遭到了p的状况的影响。

再来看一个例子：

var p = new Promise(function(resolve, reject){
    resolve(5)
})
var p1 = p.then(undefined, function(value){
    console.log(value) 
})
var p2 = p1.then(function(value){
    console.log('fulfill ' + value)   // fulfill 5
}, function(reason){
    console.log('reject ' + reason)   
})

仔细的人可能会发明，该例子中then第一个参数是undefined，且value值5被传到了p1胜利时的回调函数中。上面谁人例子中then的第二个参数是undefined，一样reason值也传到了p1失利时的回调函数中。这是因当对应的参数不为函数时，会将前一promise的状况和值通报下去。

promise含有一个实例要领catch，从名字上我们就看得出来，它和非常有千丝万缕的关联。实在catch(onReject)要领等价于then(undefined, onReject)，也就是说以下两种状况是等效的。

new Promise(function(resolve, reject){
    reject(new Error('error'))
}).then(undefined, function(reason){
    console.log(reason) // Error: error(…)
})

new Promise(function(resolve, reject){
    reject(new Error('error'))
}).catch(function(reason){
    console.log(reason) // Error: error(…)
})

我们提到参数不为函数时会把值和状况通报下去。所以我们能够在多个then以后增加一个catch要领，如许前面只需reject或抛出非常，都邑被末了的catch要领处置惩罚。

new Promise(function(resolve, reject){
    resolve(5)
}).then(function(value){
    taskA()
}).then(function(value){
    taskB()
}).then(function(value){
    taskC()
}).catch(function(reason){
    console.log(reason)
})

Promise的静态要领

Promise另有四个静态要领，离别是resolve、reject、all、race，下面我们逐一引见。

除了经由过程new Promise()的体式格局，我们另有两种建立Promise对象的要领：

Promise.resolve() 它相当于建立了一个马上resolve的对象。以下两段代码作用雷同：

Promise.resolve(5)

new Promise(function(resolve){
    resolve(5)
})

它使得promise对象直接resolve，并把5传到背面then增加的胜利函数中。

Promise.resolve(5).then(function(value){
    console.log(value) // 5
})

Promise.reject() 很明显它相当于建立了一个马上reject的对象。以下两段代码作用雷同：

Promise.reject(new Error('error'))

new Promise(function(resolve, reject){
    reject(new Error('error'))
})

它使得promise对象直接reject，并把error传到背面catch增加的函数中。

Promise.reject(new Error('error')).catch(function(reason){
    console.log(reason) // Error: error(…)
})

Promise.all() 它吸收一个promise对象构成的数组作为参数，并返回一个新的promise对象。

当数组中一切的对象都resolve时，新对象状况变成fulfilled，一切对象的resolve的value顺次增加构成一个新的数组，并以新的数组作为新对象resolve的value，例：

Promise.all([Promise.resolve(5), 
  Promise.resolve(6), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value)  // fulfill [5, 6, 7]
}, function(reason){
    console.log('reject',reason)
})

当数组中有一个对象reject时，新对象状况变成rejected，并以当前对象reject的reason作为新对象reject的reason。

Promise.all([Promise.resolve(5), 
  Promise.reject(new Error('error')), 
  Promise.resolve(7),
  Promise.reject(new Error('other error'))
  ]).then(function(value){
    console.log('fulfill', value)
}, function(reason){
    console.log('reject', reason)  // reject Error: error(…)
})

那当数组中，传入了非promise对象会怎样呢？

Promise.all([Promise.resolve(5), 
  6,
  true,
  'test',
  undefined,
  null,
  {a:1},
  function(){},
  Promise.resolve(7)
  ]).then(function(value){
    console.log('fulfill', value)  // fulfill [5, 6, true, "test", undefined, null, Object, function, 7]
}, function(reason){
    console.log('reject', reason)
})

我们发明，当传入的值为数字、boolean、字符串、undefined、null、{a:1}、function(){}等非promise对象时，会顺次把它们增加到新对象resolve时通报的数组中。

那数组中的多个对象是同时挪用，照样一个接一个的顺次挪用呢？我们再看个例子

function timeout(time) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(time);
        }, time);
    });
}
console.time('promise')
Promise.all([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); [10, 60, 100]
    console.timeEnd('promise');   // 107ms 
});

由此我们能够看出，传入的多个对象几乎是同时实行的，由于总的时候略大于用时最长的一个对象resolve的时候。

Promise.race() 它一样吸收一个promise对象构成的数组作为参数，并返回一个新的promise对象。

与Promise.all()差别，它是在数组中有一个对象（最早转变状况）resolve或reject时，就转变本身的状况，并实行相应的回调。

Promise.race([Promise.resolve(5), 
  Promise.reject(new Error('error')), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value)  // fulfill 5
}, function(reason){
    console.log('reject',reason)
})

Promise.race([Promise.reject(new Error('error')), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value) 
}, function(reason){
    console.log('reject',reason) //reject Error: error(…)
})

且当数组中有非异步Promise对象或有数字、boolean、字符串、undefined、null、{a:1}、function(){}等非Promise对象时，都邑直接以该值resolve。

Promise.race([new Promise((resolve)=>{
    setTimeout(()=>{
        resolve(1)
    },100)}),
  Promise.resolve(5), 
  "test",
  Promise.reject(new Error('error')), 
  Promise.resolve(7)]).then(function(value){
    console.log('fulfill', value)  // fulfill 5
}, function(reason){
    console.log('reject',reason)
})
// fulfill 5

数组中第一个元素是异步的Promise，第二个黑白异步Promise，会马上转变状况，所以新对象会马上转变状况并把5通报给胜利时的回调函数。

那末题目又来了，既然数组中第一个元素胜利或失利就会转变新对象的状况，那数组中背面的对象是不是会实行呢?

function timeout(time) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            console.log(time)
            resolve(time);
        }, time);
    });
}
console.time('promise')
Promise.race([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); [10, 60, 100]
    console.timeEnd('promise');   // 107ms
});

// 效果顺次为
// 10
// 10
// promise: 11.1ms
// 60
// 100

申明纵然新对象的状况转变，数组中背面的promise对象还会实行终了，实在Promise.all()中纵然前面reject了，一切的对象也都邑实行终了。范例中，promise对象实行是不能够中缀的。

补充

promise对象纵然立马转变状况，它也是异步实行的。以下所示：

Promise.resolve(5).then(function(value){
  console.log('后打出来', value)
});
console.log('先打出来')

// 效果顺次为
// 先打出来
// 后打出来 5

但另有一个有意思的例子，以下：

setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
    console.log(1)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(2)
}).then(function(){
    console.log(5)
});
console.log(3);

效果是 1 2 3 5 4，定名4是先增加到异步行列中的，为何效果不是1 2 3 4 5呢？这个涉及到Event loop，背面我会零丁讲一下。