理解Promise - 學(xué)習(xí)

JavaScript是同步編程語言甫匹，但是我們可以通過回調(diào)函數(shù)绒怨，使他看起來像異步編程語言。

Promise為了解決什么傅蹂？
Node.js用回調(diào)函數(shù)代替了事件，使異步編程在JavaScript上更加流行算凿。但當(dāng)更多程序開始使用異步編程時(shí)份蝴，事件和回調(diào)函數(shù)卻不能滿足開發(fā)者想要做的所有事情，它們還不夠強(qiáng)大澎媒，而Promise就是這些問題的解決方案。

Understanding promises in JavaScript 這篇文章描述了兩個(gè)部分用于理解 promise波桩，一是創(chuàng)建promise戒努，二是處理promise。本文是在學(xué)習(xí)此文的基礎(chǔ)上加入了一些自己的理解镐躲，大部分代碼都是學(xué)習(xí)原文作者储玫。原文內(nèi)容更豐富，建議閱讀原文萤皂。

作者在幫助理解Promise上舉了很多例子撒穷，在閱讀的過程中最好打開瀏覽器的控制臺(tái)，邊看邊執(zhí)行代碼驗(yàn)證結(jié)果裆熙，幫助理解端礼。而且例子貼近生活更便于理解禽笑。

創(chuàng)建Promise

創(chuàng)建一個(gè)promise標(biāo)準(zhǔn)的寫法如下

new Promise( /* executor */ function(resolve, reject) { ... } );

這個(gè)構(gòu)造函數(shù)接收一個(gè)執(zhí)行函數(shù)，執(zhí)行函數(shù)接收兩個(gè)參數(shù)resolve和reject蛤奥。Promise一般用于處理一些簡單的異步程序和代碼塊佳镜，比如文件程序，API調(diào)用凡桥，DB調(diào)用蟀伸，IO操作。異步程序初始化是在 executor 這個(gè)函數(shù)中初始化缅刽。如果這個(gè)異步程序執(zhí)行成功啊掏，使用resolve函數(shù)返回，如果執(zhí)行失敗使用 reject函數(shù)返回衰猛。

下面創(chuàng)建一個(gè)簡單的promise函數(shù)迟蜜，在瀏覽器控制臺(tái)執(zhí)行下面的程序

var keepsHisWord;
keepsHisWord = true;
promise1 = new Promise(function(resolve, reject) {
  if (keepsHisWord) {
    resolve("The man likes to keep his word");
  } else {
    reject("The man doesnt want to keep his word");
  }
});
console.log(promise1);

想知道結(jié)果，請把代碼復(fù)制下來在瀏覽器控制臺(tái)執(zhí)行看看吧腕侄。

image.png

由于這個(gè)promise立馬就執(zhí)行了小泉，我們沒有辦法在這個(gè)promise中檢查初始化情況。所以讓我們再重新創(chuàng)建一個(gè)promise冕杠，這個(gè)promise需要點(diǎn)時(shí)間去resolve微姊。簡單的辦法就是使用 setTimeout函數(shù)。

promise2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve({
      message: "The man likes to keep his word",
      code: "aManKeepsHisWord"
    });
  }, 10 * 1000);
});
console.log(promise2);

上方的代碼只是創(chuàng)建了一個(gè)promise分预，在10秒鐘之后無條件的 resolve兢交。So,我們可以檢查這個(gè)狀況的promise，知道它resolve為止笼痹。

image.png

10秒鐘過后配喳，promise執(zhí)行了resolve 方法，PromiseStatus和PromiseValue因此被更新凳干。你可以看到晴裹，我們可以傳遞一個(gè)JSON對象代替一個(gè)簡單string來更新resolve函數(shù)。因此我們也可以傳遞其他的數(shù)據(jù)到resolve函數(shù)中救赐。

image.png

接下來讓我們看看promise中的reject函數(shù)涧团，簡單修改上面的函數(shù)，如下：

keepsHisWord = false;
promise3 = new Promise(function(resolve, reject) {
  if (keepsHisWord) {
    resolve("The man likes to keep his word");
  } else {
    reject("The man doesn't want to keep his word");
  }
});
console.log(promise3);

至此经磅，我們創(chuàng)建了一個(gè)無法處理的reject promise泌绣，chrome瀏覽器將會(huì)顯示錯(cuò)誤提示。你可以先忽略预厌，我們接下來會(huì)解釋阿迈。

image.png

如我們所看到的PromiseStatus有三個(gè)不同的值。pending resolved 和 rejected轧叽，當(dāng)promise創(chuàng)建PromiseStatus 將會(huì)在pending狀態(tài)下苗沧，此時(shí)的PromiseValue是undefined 知道promise resolved或者rejected刊棕。當(dāng)一個(gè)promise在resolved或者rejected狀態(tài)下，這個(gè)promise可以說是settled已經(jīng)被解決崎页。所以一個(gè)promise的狀態(tài)通常是從 pending狀態(tài) 到 settled狀態(tài)鞠绰。

上面我們已經(jīng)知道了怎么創(chuàng)建promise，接下來我們將要學(xué)習(xí)如何使用和處理promise飒焦，手把手教你怎么理解Promise對象蜈膨。

理解promise對象

Promis在MDN文檔中解釋如下

Promise對象用于表示一個(gè)異步操作的最終狀態(tài)(完成或失敗)，以及其返回的值牺荠。

Promise 對象有靜態(tài)方法和原型方法翁巍，靜態(tài)方法在Promise對象中可以被申請為獨(dú)立的。記住不管是普通的方法還是原型方法休雌，只要返回一個(gè)Promise對象灶壶，就會(huì)變得簡單。

原型方法

promise有三個(gè)原型方法杈曲。所有的這些方法驰凛，處理不同的狀態(tài)。正如上文的例子當(dāng)一個(gè)Promise被創(chuàng)建担扑，最開始是pending狀態(tài)恰响，下面的三個(gè)方法將會(huì)被執(zhí)行，不管返回的是 fulfilled 或者 rejected 都會(huì)被解決

Promise.prototype.catch(onRejected)
Promise.prototype.then(onFulfilled, onRejected)
Promise.prototype.finally(onFinally)

下面這張圖片展示了 .then .catch方法涌献。如果返回一個(gè)Promise胚宦，正如下面這張圖片所示，會(huì)引起連鎖反應(yīng)燕垃。

image.png

下面作者舉了一個(gè)例子枢劝，來幫助理解Promise。

例如：你是個(gè)學(xué)生卜壕，想讓你媽媽給你買個(gè)手機(jī)您旁，她說：“我將在這個(gè)月底給你買個(gè)手機(jī)”

讓我們看看這個(gè)在JavaScript中怎么實(shí)現(xiàn)，如果這個(gè)承諾在月底執(zhí)行轴捎。

var momsPromise = new Promise(function(resolve, reject) {
  momsSavings = 20000;
  priceOfPhone = 60000;
  if (momsSavings > priceOfPhone) {
    resolve({
      brand: "iphone",
      model: "6s"
    });
  } else {
    reject("We donot have enough savings. Let us save some more money.");
  }
});
momsPromise.then(function(value) {
  console.log("Hurray I got this phone as a gift ", JSON.stringify(value));
});
momsPromise.catch(function(reason) {
  console.log("Mom coudn't buy me the phone because ", reason);
});
momsPromise.finally(function() {
  console.log(
    "Irrespecitve of whether my mom can buy me a phone or not, I still love her"
  );
});

輸出如下

image.png

如果我們改變 momSavings到200000鹤盒，愿望達(dá)成，輸出如下

image.png

我們模擬數(shù)據(jù)輸出轮蜕，這樣我們就可以看到怎么有效的使用then和catch

.then 可以同時(shí)標(biāo)記onFulfilled昨悼，onRejected handlers蝗锥，我們可以將它們寫在一起跃洛，代替分開的寫法，我們可以使用 .then處理兩種情況终议，如下：

momsPromise.then(
 function(value) {
   console.log("Hurray I got this phone as a gift ", JSON.stringify(value));
 },
 function(reason) {
   console.log("Mom coudn't buy me the phone because ", reason);
 }
);

除了可讀性強(qiáng)了一些汇竭，最好還是分開寫吧葱蝗。

為了更好的理解Promise，讓我們創(chuàng)建一個(gè)函數(shù)返回promise细燎，將會(huì)隨機(jī)的返回resolved或者rejected两曼，這樣我們就可以測試多種情況。

function getRandomNumber(start = 1, end = 10) {
  //works when both start,end are >=1 and end > start
  return parseInt(Math.random() * end) % (end-start+1) + start;
}

下面將創(chuàng)建一返回promise的函數(shù)玻驻，使用隨機(jī)函數(shù)悼凑，隨機(jī)生成一個(gè)數(shù)，如果大于5將resolved璧瞬，小于5返回 rejected户辫，

function getRandomNumber(start = 1, end = 10) {
  //works when both start and end are >=1
  return (parseInt(Math.random() * end) % (end - start + 1)) + start;
}
var promiseTRRARNOSG = (promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator = function() {
  return new Promise(function(resolve, reject) {
    let randomNumberOfSeconds = getRandomNumber(2, 10);
    setTimeout(function() {
      let randomiseResolving = getRandomNumber(1, 10);
      if (randomiseResolving > 5) {
        resolve({
          randomNumberOfSeconds: randomNumberOfSeconds,
          randomiseResolving: randomiseResolving
        });
      } else {
        reject({
          randomNumberOfSeconds: randomNumberOfSeconds,
          randomiseResolving: randomiseResolving
        });
      }
    }, randomNumberOfSeconds * 1000);
  });
});
var testProimse = promiseTRRARNOSG();
testProimse.then(function(value) {
  console.log("Value when promise is resolved : ", value);
});
testProimse.catch(function(reason) {
  console.log("Reason when promise is rejected : ", reason);
});
// Let us loop through and create ten different promises using the function to see some variation. Some will be resolved and some will be rejected. 
for (i=1; i<=10; i++) {
  let promise = promiseTRRARNOSG();
  promise.then(function(value) {
    console.log("Value when promise is resolved : ", value);
  });
  promise.catch(function(reason) {
    console.log("Reason when promise is rejected : ", reason);
  });
}

刷新瀏覽器控制臺(tái)，在控制臺(tái)中執(zhí)行上面的函數(shù)嗤锉，觀察不同的輸出情況 resolve 和 reject渔欢。

靜態(tài)方法

在Promise對象中，這里有四個(gè)靜態(tài)方法

前兩個(gè)方法可以快速的創(chuàng)建resolved 或者 rejected promise函數(shù)

幫助你創(chuàng)建一個(gè)rejected promise

Promise.reject(reason)

var promise3 = Promise.reject("Not interested");
promise3.then(function(value){
  console.log("This will not run as it is a resolved promise. The resolved value is ", value);
});
promise3.catch(function(reason){
  console.log("This run as it is a rejected promise. The reason is ", reason);
});

幫助你創(chuàng)建一個(gè)resolved promise

Promise.resolve(value)

var promise4 = Promise.resolve(1);
promise4.then(function(value){
  console.log("This will run as it is a resovled promise. The resolved value is ", value);
});
promise4.catch(function(reason){
  console.log("This will not run as it is a resolved promise", reason);
});

一個(gè)promise可以有多個(gè)處理程序瘟忱，更新上面的代碼如下

var promise4 = Promise.resolve(1);
promise4.then(function(value){
  console.log("This will run as it is a resovled promise. The resolved value is ", value);
});
promise4.then(function(value){
  console.log("This will also run as multiple handlers can be added. Printing twice the resolved value which is ", value * 2);
});
promise4.catch(function(reason){
  console.log("This will not run as it is a resolved promise", reason);
});

輸出如下：

image.png

下面的兩個(gè)方法幫助你處理 promises奥额。當(dāng)你處理多個(gè)promises，最好的方法是創(chuàng)建一個(gè)promises數(shù)組访诱，然后在設(shè)置promises的時(shí)候做必要的操作垫挨。下面創(chuàng)建兩個(gè)方法，一個(gè)將在幾秒鐘之后resolve盐数，另一個(gè)在幾秒鐘之后reject棒拂。

var promiseTRSANSG = (promiseThatResolvesAfterNSecondsGenerator = function(
  n = 0
) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve({
        resolvedAfterNSeconds: n
      });
    }, n * 1000);
  });
});

var promiseTRJANSG = (promiseThatRejectsAfterNSecondsGenerator = function(
  n = 0
) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject({
        rejectedAfterNSeconds: n
      });
    }, n * 1000);
  });
});

Promise.All

MDN 文檔解釋如下

Promise.all(iterable)方法返回一個(gè)Promise實(shí)例，此實(shí)例在iterable參數(shù)內(nèi)所有的promise都完成(resolved)或參數(shù)中不包含promise時(shí)回調(diào)完成(resolve);如果參數(shù)中promise有一個(gè)失斆登狻（rejected）帚屉，此實(shí)例回調(diào)失敗（reject）漾峡，失敗原因的是一個(gè)失敗promise結(jié)果攻旦。

示例1：當(dāng)所有的promise都完成（resolved）。大多數(shù)都會(huì)設(shè)想這種情況生逸。

console.time("Promise.All");
var promisesArray = [];
promisesArray.push(promiseTRSANSG(1));
promisesArray.push(promiseTRSANSG(4));
promisesArray.push(promiseTRSANSG(2));
var handleAllPromises = Promise.all(promisesArray);
handleAllPromises.then(function(values) {
  console.timeEnd("Promise.All");
  console.log("All the promises are resolved", values);
});
handleAllPromises.catch(function(reason) {
  console.log("One of the promises failed with the following reason", reason);
});

image.png

我們從結(jié)果中得出兩個(gè)重要的結(jié)論

第三個(gè)promise花了兩秒完成牢屋，上一個(gè)promise花了4秒完成。但是正如你看到的輸出仍然保持有序的狀態(tài)
上面的程序增加了一個(gè)timer用于記錄Promise.All花了多長時(shí)間槽袄。如果promise是按順序執(zhí)行的需要花費(fèi) 1+4+2=7秒烙无。但是從我們的timer中可以看到只花費(fèi)了4秒。這可以證明所有的promises是并行執(zhí)行的遍尺。

示例2：當(dāng)沒有promises會(huì)發(fā)生什么

console.time("Promise.All");
var promisesArray = [];
promisesArray.push(1);
promisesArray.push(4);
promisesArray.push(2);
var handleAllPromises = Promise.all(promisesArray);
handleAllPromises.then(function(values) {
  console.timeEnd("Promise.All");
  console.log("All the promises are resolved", values);
});
handleAllPromises.catch(function(reason) {
  console.log("One of the promises failed with the following reason", reason);
});

image.png

因?yàn)閿?shù)組中沒有promises截酷，返回的promises是已完成的（resolved）

示例3：當(dāng)只有一個(gè)promises返回失敗時(shí)會(huì)怎么樣

console.time("Promise.All");
var promisesArray = [];
promisesArray.push(promiseTRSANSG(1));
promisesArray.push(promiseTRSANSG(5));
promisesArray.push(promiseTRSANSG(3));
**promisesArray.push(promiseTRJANSG(2));**
promisesArray.push(promiseTRSANSG(4));
var handleAllPromises = Promise.all(promisesArray);
handleAllPromises.then(function(values) {
  console.timeEnd("Promise.All");
  console.log("All the promises are resolved", values);
});
handleAllPromises.catch(function(reason) {
  console.timeEnd("Promise.All");
  console.log("One of the promises failed with the following reason ", reason);
});

image.png

當(dāng)執(zhí)行到失敗程序時(shí)，promises里面停止并返回reject信息

綜上： Promise.all()只有在所有的promise數(shù)組都resolve時(shí)才會(huì)返回所有完成的數(shù)據(jù)乾戏。但要是數(shù)組中有一個(gè)promise任務(wù)失敗迂苛，Promise.all()就會(huì)返回當(dāng)前失敗的promise信息三热，而就算其他的promise任務(wù)執(zhí)行成功，也會(huì)返回reject三幻【脱可以這么理解，Promise.all()返回結(jié)果要么是所有的念搬，要么什么都沒有抑堡。

Promise.race

MDN文檔說明

Promise.race(iterable)方法返回一個(gè)promise，一旦迭代器中的某個(gè)promise解決或拒絕朗徊，返回的promise就會(huì)解決或拒絕夷野。

示例1：promises優(yōu)先解決

console.time("Promise.race");
var promisesArray = [];
promisesArray.push(promiseTRSANSG(4));
promisesArray.push(promiseTRSANSG(3));
promisesArray.push(promiseTRSANSG(2));
promisesArray.push(promiseTRJANSG(3));
promisesArray.push(promiseTRSANSG(4));
var promisesRace = Promise.race(promisesArray);
promisesRace.then(function(values) {
  console.timeEnd("Promise.race");
  console.log("The fasted promise resolved", values);
});
promisesRace.catch(function(reason) {
  console.timeEnd("Promise.race");
  console.log("The fastest promise rejected with the following reason ", reason);
});

image.png

所以的promises并行執(zhí)行，第三個(gè)promise在2秒內(nèi)完成荣倾，只要這個(gè)promise完成悯搔，Promise.race被解決。

示例2：當(dāng)promises中reject程序優(yōu)先完成

console.time("Promise.race");
var promisesArray = [];
promisesArray.push(promiseTRSANSG(4));
promisesArray.push(promiseTRSANSG(6));
promisesArray.push(promiseTRSANSG(5));
promisesArray.push(promiseTRJANSG(3));
promisesArray.push(promiseTRSANSG(4));
var promisesRace = Promise.race(promisesArray);
promisesRace.then(function(values) {
  console.timeEnd("Promise.race");
  console.log("The fasted promise resolved", values);
});
promisesRace.catch(function(reason) {
  console.timeEnd("Promise.race");
  console.log("The fastest promise rejected with the following reason ", reason);
});

image.png

所有的promise并行執(zhí)行舌仍。第四個(gè)promise在3秒內(nèi)reject妒貌。只要這個(gè)完成，Promise.race返回rejected

綜上： Promise.race()傳入的promise數(shù)組中铸豁，總是返回最先執(zhí)行完的一個(gè)灌曙，不管是reject還是resolved

作者在文章的最后也貼出了code gist上面例子的代碼片段，如有需要可以在原文中查看节芥。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末在刺，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子头镊，更是在濱河造成了極大的恐慌蚣驼，老刑警劉巖，帶你破解...
沈念sama閱讀 206,126評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件相艇，死亡現(xiàn)場離奇詭異颖杏，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)坛芽，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,254評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門留储，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人咙轩，你說我怎么就攤上這事获讳。” “怎么了活喊？”我有些...
開封第一講書人閱讀 152,445評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵丐膝，是天一觀的道長。經(jīng)常有香客問我，道長尤误，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,185評(píng)論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任结缚，我火速辦了婚禮损晤，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘红竭。我一直安慰自己尤勋，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布茵宪。她就那樣靜靜地躺著最冰，像睡著了一般。火紅的嫁衣襯著肌膚如雪稀火。梳的紋絲不亂的頭發(fā)上暖哨，一...
開封第一講書人閱讀 48,970評(píng)論 1贊 284
城市分裂傳說
那天，我揣著相機(jī)與錄音凰狞，去河邊找鬼篇裁。笑死，一個(gè)胖子當(dāng)著我的面吹牛赡若，可吹牛的內(nèi)容都是我干的达布。我是一名探鬼主播，決...
沈念sama閱讀 38,276評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼逾冬，長吁一口氣：“原來是場噩夢啊……” “哼黍聂！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起身腻，我...
開封第一講書人閱讀 36,927評(píng)論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤产还，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后嘀趟，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體雕沉，經(jīng)...
沈念sama閱讀 43,400評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年去件，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了坡椒。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡尤溜，死狀恐怖倔叼，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情宫莱，我是刑警寧澤丈攒，帶...
沈念sama閱讀 33,646評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響巡验，放射性物質(zhì)發(fā)生泄漏际插。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一显设、第九天我趴在偏房一處隱蔽的房頂上張望框弛。院中可真熱鬧，春花似錦捕捂、人聲如沸瑟枫。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,204評(píng)論 0贊 19
一樁弒父案指攒，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽慷妙。三九已至，卻和暖如春允悦，著一層夾襖步出監(jiān)牢的瞬間膝擂，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,423評(píng)論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工隙弛，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留猿挚，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,423評(píng)論 2贊 352
代替公主和親
正文我出身青樓驶鹉，卻偏偏與公主長得像绩蜻，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子室埋，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345

理解Promise - 學(xué)習(xí)

創(chuàng)建Promise

理解promise對象

原型方法

靜態(tài)方法

Promise.All

Promise.race

推薦閱讀更多精彩內(nèi)容