閱讀目錄

• 什么是Prmoise
• Promise的使用

最近在看《你不知道的javascript中卷》，發(fā)覺(jué)作者花了基本一半的篇幅去講異步和promise，覺(jué)得有必要總結(jié)一下。

其實(shí)本文的目的是想手寫一個(gè)Promise的，無(wú)奈總結(jié)著總結(jié)著發(fā)覺(jué)篇幅有點(diǎn)長(zhǎng)，因此只好一分為二，先介紹promise的用法，知道怎么用，我們才知道怎么寫，所以把手寫一個(gè)promise的任務(wù)放到了下一篇文章當(dāng)中。

當(dāng)然，網(wǎng)上有很多關(guān)于promise的文章，都可以參考參考，有誤之處，歡迎之處。

什么是Prmoise

promise是ES6新增的一個(gè)特征，它已被列入ES6的正式規(guī)范中

Promise對(duì)象可以理解為一次執(zhí)行的異步操作，使用promise對(duì)象之后可以使用一種鏈?zhǔn)秸{(diào)用的方式來(lái)組織代碼；讓代碼更加的直觀。也就是說(shuō)，有了Promise對(duì)象，就可以將異步操作以同步的操作的流程表達(dá)出來(lái)，避免了層層嵌套的回調(diào)函數(shù)。

示例：未使用promise，回調(diào)必須層層嵌套

$.ajax(url1, function(data1){
 // do something...
 $.ajax(url2, function(data2){
 // do something...
 $.ajax(url3, function(data3){
 // do something...
 done(data3); // 返回?cái)?shù)據(jù)
 })
 });
});

如果有多個(gè)嵌套，導(dǎo)致代碼不夠直觀，而且如果幾個(gè)操作之前沒(méi)有前后順序之分，需要等待上一個(gè)操作完成才可以進(jìn)行下一個(gè)操作，造成不必要的等待

promise就是為了解決這些問(wèn)題而產(chǎn)生的。

Promise對(duì)象的特點(diǎn)：

1、對(duì)象的狀態(tài)不受外界影響。

Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)

• pending（執(zhí)行中）
• Resolved（成功，又稱Fulfilled）
• rejected（拒絕）

其中pending為初始狀態(tài)，fulfilled和rejected為結(jié)束狀態(tài)（結(jié)束狀態(tài)表示promise的生命周期已結(jié)束）。

promise只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài).。

2、一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。

Promise對(duì)象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected

pending->fulfilled，pending->rejected。

只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果

Promise對(duì)象的缺點(diǎn)：

1、無(wú)法取消Promise，一旦新建它就會(huì)立即執(zhí)行，無(wú)法中途取消。

2、如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部。

3、當(dāng)處于Pending狀態(tài)時(shí)，無(wú)法得知目前進(jìn)展到哪一個(gè)階段（剛剛開始還是即將完成）。

promise兼容性

除了IE這種古老的瀏覽器和一些低版本的安卓外，現(xiàn)代瀏覽器支持還是挺好的，所以我們可以在谷歌的控制臺(tái)直接測(cè)試我們的代碼

Promise的使用

先提前說(shuō)明一下，下面的代碼示例，都可以復(fù)制到谷歌的控制臺(tái)就行測(cè)試??！

1、基本用法：

（1）、首先我們new一個(gè)Promise,將Promise實(shí)例化

（2）、然后在實(shí)例化的promise可以傳兩個(gè)參數(shù)，一個(gè)是成功之后的resolve，一個(gè)是失敗之后的reject

（3）、Promise實(shí)例生成以后，可以用then方法分別指定Resolved狀態(tài)和Reject狀態(tài)的回調(diào)函數(shù)

代碼如下：

var promise = function(isReady){
 return new Promise(function(resolve, reject){
 // do somthing, maybe async
 if (isReady){
  return resolve('hello world');
 } else {
  return reject('failure');
 }
 });
}
//Promise實(shí)例生成以后，可以用then方法分別指定Resolved狀態(tài)和Reject狀態(tài)的回調(diào)函數(shù)。
promise(true).then(function(value){
 // success,這里是resolve的回調(diào)函數(shù)
 console.log(value); //hello world
}, function(err){
 // failure，這里是reject的回調(diào)函數(shù)
 console.log(err)
})

上述代碼是執(zhí)行成功，返回hello world,如果想測(cè)試一下失敗后的返回值，可以在promise(true).then...這里改為 promise(false).then...即可

2、鏈?zhǔn)讲僮?/strong>

makePromise1()
.then(function(value){
 console.log(value);
 return makePromise2();
})
.then(function(value){
 console.log(value);
 return makePromise3();
})
.then(function(value){
 console.log(value);
});
function makePromise1(){
 var p = new Promise(function(resolve, reject){
 //異步操作
 setTimeout(function(){
  console.log('異步任務(wù)1');
  resolve('異步任務(wù)1傳過(guò)來(lái)的值');
 }, 2000);
 });
 return p;  
}
function makePromise2(){
 var p = new Promise(function(resolve, reject){
 //異步操作
 setTimeout(function(){
  console.log('異步任務(wù)2');
  resolve('異步任務(wù)2傳過(guò)來(lái)的值');
 }, 2000);
 });
 return p;  
}
function makePromise3(){
 var p = new Promise(function(resolve, reject){
 //異步操作
 setTimeout(function(){
  console.log('異步任務(wù)3');
  resolve('異步任務(wù)3傳過(guò)來(lái)的值');
 }, 2000);
 });
 return p;  
}

異步任務(wù)1
異步任務(wù)1傳過(guò)來(lái)的值
異步任務(wù)2
異步任務(wù)2傳過(guò)來(lái)的值
異步任務(wù)3
異步任務(wù)3傳過(guò)來(lái)的值

var promise = function(isReady){
 return new Promise(function(resolve, reject){
 // do somthing, maybe async
 if (isReady){
  return resolve('hello world');
 } else {
  return reject('failure');
 }
 });
}
promise(true)
.then(function(value){
 console.log('resolved');
 console.log(value);
 console.log(haha); //此處的haha未定義
})
.catch(function(error){
 console.log('rejected');
 console.log(error);
});

resolved
hello world
rejected
ReferenceError: haha is not defined(…)

var p1 = new Promise(function (resolve) {
 setTimeout(function () {
 resolve("第一個(gè)promise");
 }, 3000);
});
var p2 = new Promise(function (resolve) {
 setTimeout(function () {
 resolve("第二個(gè)promise");
 }, 1000);
});
Promise.all([p1, p2]).then(function (result) {
 console.log(result); // ["第一個(gè)promise", "第二個(gè)promise"]
});

var p1 = new Promise(function (resolve) {
 setTimeout(function () {
 console.log(1);
 resolve("第一個(gè)promise");
 }, 3000);
});
var p2 = new Promise(function (resolve) {
 setTimeout(function () {
 console.log(2);
 resolve("第二個(gè)promise");
 }, 1000);
});
Promise.race([p1, p2]).then(function (result) {
 console.log(result); 
});
// 結(jié)果：
// 2
// 第二個(gè)promise
// 1