Promise對象

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

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

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

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

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

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

"use strict";

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

/**
 * 定義一個(gè)異步執(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";

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

/**
 * 定義一個(gè)異步執(zhí)行函數(shù)，返回值是一個(gè)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 次
*************************************/

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

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

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

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

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

"use strict";

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

/**
 * 定義一個(gè)異步執(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 次
*************************************/

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

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

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

"use strict";

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

/**
 * 定義一個(gè)異步執(zhí)行函數(shù)，返回值是一個(gè)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，可否實(shí)現(xiàn)？

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

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

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

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

"use strict";

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

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

/**
 * 包裝異步執(zhí)行函數(shù)，返回一個(gè)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 次
*************************************/

認(rèn)識Promise

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

方法概述

可以看到，在Promise的prototype上有三個(gè)方法，也就是實(shí)例對象上有三個(gè)方法：

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)

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

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

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

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

Promise的實(shí)例方法

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

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

"use strict";

let num = 3;

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

首先明確一點(diǎn)，Promise對象創(chuàng)建的時(shí)候，立即執(zhí)行。可是，既然是立即執(zhí)行，怎么獲取對應(yīng)的狀態(tài)值呢？下面就要使用then方法了。

promise.then(onFulfilled[, onRejected]);

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

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

// 把上面的代碼進(jìn)行簡化
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)方法

為了方法認(rèn)識Promise.all和Promise.race，定義三個(gè)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í)行完成的時(shí)候，才會執(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)時(shí)，才會觸發(fā)then方法；其中一個(gè)變?yōu)閞ejected狀態(tài)，那么就觸發(fā)catch方法。

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

更改一個(gè)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對象中的一個(gè)執(zhí)行完成的時(shí)候，就會執(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方法，就是不落下任何一個(gè)人；而Promise.race方法是有一個(gè)執(zhí)行完成就會觸發(fā)then方法，就是看誰跑得快。

后續(xù)的兩個(gè)方法，以后用到的時(shí)候再補(bǔ)充，因?yàn)檫@些內(nèi)容對現(xiàn)在而言已經(jīng)夠用了。

GPU云服務(wù)器云服務(wù)器 promise Promise使用 promise用法中的Promise

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

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

發(fā)表評論

登陸后可評論

0條評論

琛ｈ。

男|高級講師

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

TA的文章

tensorflow增加維度

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

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

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

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

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

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

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

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Promise對象

相關(guān)文章

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

關(guān)于Promise

js-Promise

**簡單學(xué)習(xí) Promise 對象**

嘗試實(shí)現(xiàn)一個(gè)Promise

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

發(fā)表評論

0條評論

琛ｈ。

男|高級講師

TA的文章

tensorflow增加維度

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

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

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

css的background屬性

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

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

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

最新活動