Promise對象

琛ｈ。發(fā)布于2019-08-21 16:58 / 2871人閱讀

摘要：對比回調(diào)函數(shù)和暫時不管是什么，先看一下下面的代碼，看一看的好處?；卣{(diào)函數(shù)執(zhí)行一次首先，定義一個回調(diào)函數(shù)，調(diào)用一次，看看這個代碼的寫法。上面的代碼中，在方法中需要傳遞兩個回調(diào)函數(shù)，這樣看著會有點亂。

對比回調(diào)函數(shù)和Promise

暫時不管Promise是什么，先看一下下面的代碼，看一看Promise的好處。需要特別說明的是，在這個對比的中，Promise和回調(diào)都沒有考慮存在異常的情況。

回調(diào)函數(shù)執(zhí)行一次

首先，定義一個回調(diào)函數(shù)，調(diào)用一次，看看這個代碼的寫法。

"use strict";

// 定義一個計數(shù)器，用來統(tǒng)計回調(diào)函數(shù)執(zhí)行的次數(shù)
let count = 1;

/**
 * 定義一個異步執(zhí)行函數(shù)，參數(shù)是回調(diào)函數(shù)
 */
function asyncFunc(callback) {
  setTimeout(function () {
    callback(`callback ... 執(zhí)行了 ${count} 次`);
    count++;
  }, 1000);
};

// 調(diào)用函數(shù)
asyncFunc(function(data){
  console.log(data);
});

/*************************************
callback ... 執(zhí)行了 1 次
*************************************/

如果用Promise改寫，會是什么樣的效果呢？

"use strict";

// 定義一個計數(shù)器，用來統(tǒng)計回調(diào)函數(shù)執(zhí)行的次數(shù)
let count = 1;

/**
 * 定義一個異步執(zhí)行函數(shù)，返回值是一個Promise對象
 */
function asyncFunc() {
  let promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(`resolve ... 執(zhí)行了 ${count} 次`);
      count++;
    }, 1000);
  });
  return promise;
};

// 調(diào)用函數(shù)
asyncFunc().then(function(data){
  console.log(data);
});

/*************************************
resolve ... 執(zhí)行了 1 次
*************************************/

怎么感覺代碼更復雜，更加難于理解了？確實，在定義函數(shù)的時候，需要返回一個Promise對象，增加了代碼量，看著沒什么優(yōu)勢。從這點來看，學這個東西，完全沒有必要啊。

別著急，接著往下走。。。。

回調(diào)函數(shù)執(zhí)行多次

上面的情況只是調(diào)用一次函數(shù)，那么調(diào)用多次呢？比如調(diào)用個五次、七次。下面咱們看看調(diào)用七次的情況。

首先，還是先看看使用回調(diào)函數(shù)的情況：

"use strict";

// 定義一個計數(shù)器，用來統(tǒng)計回調(diào)函數(shù)執(zhí)行的次數(shù)
let count = 1;

/**
 * 定義一個異步執(zhí)行函數(shù)，參數(shù)是回調(diào)函數(shù)
 */
function asyncFunc(callback) {
  setTimeout(function () {
    callback(`callback ... 執(zhí)行了 ${count} 次`);
    count++;
  }, 1000);
};

// 調(diào)用函數(shù)
asyncFunc(function (data) { // 第一次調(diào)用
  console.log(data);
  asyncFunc(function (data) { // 第二次調(diào)用
    console.log(data);
    asyncFunc(function (data) { // 第三次調(diào)用
      console.log(data);
      asyncFunc(function (data) { // 第四次調(diào)用
        console.log(data);
        asyncFunc(function (data) { // 第五次調(diào)用
          console.log(data);
          asyncFunc(function (data) { // 第六次調(diào)用
            console.log(data);
            asyncFunc(function (data) { // 第七次調(diào)用
              console.log(data);
            });
          });
        });
      });
    });
  });
});

/*************************************
callback ... 執(zhí)行了 1 次
callback ... 執(zhí)行了 2 次
callback ... 執(zhí)行了 3 次
callback ... 執(zhí)行了 4 次
callback ... 執(zhí)行了 5 次
callback ... 執(zhí)行了 6 次
callback ... 執(zhí)行了 7 次
*************************************/

看著挺好看，但是，當回調(diào)更多的時候，如何分清是哪個回調(diào)，又怎么判斷哪個括號對應(yīng)哪句代碼呢？其實這就是一個回調(diào)地獄，這樣的代碼可讀性差。

這個時候，Promise就可以發(fā)揮作用了。

看了回調(diào)函數(shù)，再來看看使用Promise的情況：

"use strict";

// 定義一個計數(shù)器，用來統(tǒng)計回調(diào)函數(shù)執(zhí)行的次數(shù)
let count = 1;

/**
 * 定義一個異步執(zhí)行函數(shù)，返回值是一個Promise對象
 */
function asyncFunc() {
  let promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(`resolve ... 執(zhí)行了 ${count} 次`);
      count++;
    }, 1000);
  });
  return promise;
};

// 調(diào)用函數(shù)
asyncFunc() // 第一次調(diào)用
  .then(function (data) {
    console.log(data);
    return asyncFunc(); // 第二次調(diào)用
  })
  .then(function (data) {
    console.log(data);
    return asyncFunc(); // 第三次調(diào)用
  })
  .then(function (data) {
    console.log(data);
    return asyncFunc(); // 第四次調(diào)用
  })
  .then(function (data) {
    console.log(data);
    return asyncFunc(); // 第五次調(diào)用
  })
  .then(function (data) {
    console.log(data);
    return asyncFunc(); // 第六次調(diào)用
  })
  .then(function (data) {
    console.log(data);
    return asyncFunc(); // 第七次調(diào)用
  })
  .then(function (data) {
    console.log(data);
  });
  
/*************************************
resolve ... 執(zhí)行了 1 次
resolve ... 執(zhí)行了 2 次
resolve ... 執(zhí)行了 3 次
resolve ... 執(zhí)行了 4 次
resolve ... 執(zhí)行了 5 次
resolve ... 執(zhí)行了 6 次
resolve ... 執(zhí)行了 7 次
*************************************/

會發(fā)現(xiàn)，是用了Promise代碼可讀性變得很好，以后也便于修改。

用Promise包裝舊回調(diào)寫法

現(xiàn)在可以看出Promise的好處，如果想以后都使用Promise，可否實現(xiàn)？

肯定可以實現(xiàn)啊，下面就使用Promise來包裝上面的回調(diào)函數(shù)。

使用Promise包裹的時候，只需要經(jīng)過下面幾個步驟：

定義一個函數(shù)，返回Promise對象

在Promise對象中調(diào)用異步執(zhí)行函數(shù)，參數(shù)是創(chuàng)建Promise對象時傳遞的函數(shù)

"use strict";

// 定義一個計數(shù)器，用來統(tǒng)計回調(diào)函數(shù)執(zhí)行的次數(shù)
let count = 1;

/**
 * 定義一個異步執(zhí)行函數(shù)，參數(shù)是回調(diào)函數(shù)
 */
function asyncFunc(callback) {
  setTimeout(function () {
    callback(`callback ... 執(zhí)行了 ${count} 次`);
    count++;
  }, 1000);
};

/**
 * 包裝異步執(zhí)行函數(shù)，返回一個Promise對象
 */
function wrapperAsyncFunc() {
  let promise = new Promise(function (resolve, reject) {
    asyncFunc(resolve);
  });
  return promise;
};

// 調(diào)用
wrapperAsyncFunc()
  .then(function (data) {
    console.log(data);
    return wrapperAsyncFunc();
  })
  .then(function (data) {
    console.log(data);
  });
  
/*************************************
callback ... 執(zhí)行了 1 次
callback ... 執(zhí)行了 2 次
*************************************/

認識Promise

在谷歌瀏覽器中，我們看看Promise都包含什么：

方法概述

可以看到，在Promise的prototype上有三個方法，也就是實例對象上有三個方法：

new Promise(function(resolve, reject) { ... } );
promise.then(onFulfilled[, onRejected]);
promise.catch(onRejected);

Promise對象本身的方法，就是靜態(tài)方法：

Promise.all(iterable);
Promise.race(iterable);
Promise.reject(reason);
Promise.resolve();

Promise的三種狀態(tài)

在認識這些方法之前，先認識一下Promise的三種狀態(tài)：

pending: 初始狀態(tài)，創(chuàng)建Promise成功后的狀態(tài)

fulfilled: 操作執(zhí)行成功后的狀態(tài)

rejected: 操作執(zhí)行失敗后的狀態(tài)

Promise的實例方法

首先，先來創(chuàng)建一個Promise對象，可以根據(jù)num的值，來調(diào)節(jié)執(zhí)行的函數(shù)是resolve還是reject：

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

"use strict";

let num = 3;

// 創(chuàng)建一個Promise對象
let promise = new Promise(function (resolve, reject) {
  if (num > 5) {
    resolve("success ..."); // 操作執(zhí)行成功執(zhí)行的函數(shù)
  } else {
    reject("failure ..."); // 操作執(zhí)行失敗執(zhí)行的函數(shù)
  }
});

首先明確一點，Promise對象創(chuàng)建的時候，立即執(zhí)行?？墒牵热皇橇⒓磮?zhí)行，怎么獲取對應(yīng)的狀態(tài)值呢？下面就要使用then方法了。

promise.then(onFulfilled[, onRejected]);

promise.then(function (data) {
  console.log(data);
}, function (reason) {
  console.log(reason);
});

上面的代碼中，在then方法中需要傳遞兩個回調(diào)函數(shù)，這樣看著會有點亂。有沒有更優(yōu)的解決方式？有，這個時候要使用catch方法。

// 把上面的代碼進行簡化
promise
  .then(function (data) { // 狀態(tài)變?yōu)閒ulfilled后執(zhí)行的回調(diào)
    console.log(data);
  }).catch(function (reason) { // 狀態(tài)變?yōu)閞ejected后執(zhí)行的回調(diào)
    console.log(reason);
  });

Promise的靜態(tài)方法

為了方法認識Promise.all和Promise.race，定義三個Promise對象：

let promise1 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("promise1 ...");
    console.log("done1 ...");
  }, 2000); // 延遲2秒
});

let promise2 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("promise2 ...");
    console.log("done2 ...");
  }, 4000); // 延遲4秒
});

let promise3 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("promise3 ...");
    console.log("done3 ...");
  }, 6000); // 延遲6秒
});

Promise.all

Promise.all的作用是在參數(shù)中的所有Promise對象完全執(zhí)行完成的時候，才會執(zhí)行自身的then或catch方法：

Promise
  .all([promise1, promise2, promise3])
  .then(function (data) {
    console.log(data);
  })
  .catch(function (reason) {
    console.log(reason);
  });
 
/***************************************
done1 ...
done2 ...
done3 ...
[ "promise1 ...", "promise2 ...", "promise3 ..." ]
***************************************/

Promise.all中所有的Promise對象狀態(tài)都變?yōu)閒ulfiled狀態(tài)時，才會觸發(fā)then方法；其中一個變?yōu)閞ejected狀態(tài)，那么就觸發(fā)catch方法。

需要注意的是，即使觸發(fā)了catch方法，其他的Promise對象中的代碼還是會正常執(zhí)行的。因為這是Promise的特性，創(chuàng)建之后，立即執(zhí)行。

更改一個Promise對象之后，結(jié)果就會成下面的狀態(tài)：

let promise2 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    reject("promise2 ...");
    console.log("done2 ...");
  }, 4000);
});

/***************************************
done1 ...
done2 ...
promise2 ...
done3 ...
***************************************/

Promise.race

Promise.race的作用是在參數(shù)中的Promise對象中的一個執(zhí)行完成的時候，就會執(zhí)行自身的then或catch方法：

Promise
  .race([promise1, promise2, promise3])
  .then(function (data) {
    console.log(data);
  })
  .catch(function (reason) {
    console.log(reason);
  });

/***************************************
done1 ...
promise1 ...
done2 ...
done3 ...
***************************************/

需要注意的是：Promise.all方法是所有的都執(zhí)行完成才會觸發(fā)then方法，就是不落下任何一個人；而Promise.race方法是有一個執(zhí)行完成就會觸發(fā)then方法，就是看誰跑得快。

后續(xù)的兩個方法，以后用到的時候再補充，因為這些內(nèi)容對現(xiàn)在而言已經(jīng)夠用了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88977.html

發(fā)表評論

登陸后可評論

0條評論

琛ｈ。

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow增加維度

閱讀 2835·2023-04-26 01:00
程序員工資和生活現(xiàn)狀！都是你要的真相！

閱讀 766·2021-10-11 10:59
在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

閱讀 2990·2019-08-30 11:18
前端面試之CSS總結(jié)(上)

閱讀 2691·2019-08-29 11:18
css的background屬性

閱讀 1025·2019-08-28 18:28
淺談http協(xié)議（二）：cookie的歷史由來與實際應(yīng)用

閱讀 3024·2019-08-26 18:36
chrome插件開發(fā) - tab選項卡管理器

閱讀 2142·2019-08-23 18:16
ajax的關(guān)鍵性使用理解，一句話。

閱讀 1075·2019-08-23 15:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Promise對象

相關(guān)文章

Promise——從閱讀文檔到簡單實現(xiàn)（一）

關(guān)于Promise

js-Promise

**簡單學習 Promise 對象**

嘗試實現(xiàn)一個Promise

**關(guān)于promise的小結(jié)**

發(fā)表評論

0條評論

琛ｈ。

男|高級講師

TA的文章

tensorflow增加維度

程序員工資和生活現(xiàn)狀！都是你要的真相！

在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

前端面試之CSS總結(jié)(上)

css的background屬性

淺談http協(xié)議（二）：cookie的歷史由來與實際應(yīng)用

chrome插件開發(fā) - tab選項卡管理器

ajax的關(guān)鍵性使用理解，一句話。

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Promise對象

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！