談談 ES6 的 Promise 對象

linkin 發布于2019-08-21 10:33 / 1936人閱讀

摘要：一般會這樣去寫要在第一個請求成功后才可以執行下一步這樣的寫法的原理是，當執行一些異步操作時，我們需要知道操作是否已經完成，所有當執行完成的時候會返回一個回調函數，表示操作已經完成。

前言

開篇首先設想一個日常開發常常會遇到的需求：在多個接口異步請求數據，然后利用這些數據來進行一系列的操作。一般會這樣去寫：

$.ajax({
    url: "......",
    success: function (data) {
        $.ajax({
            // 要在第一個請求成功后才可以執行下一步
            url: "......",
            success: function (data) {
                 // ......
            }
        });
    }
});

這樣的寫法的原理是，當執行一些異步操作時，我們需要知道操作是否已經完成，所有當執行完成的時候會返回一個回調函數，表示操作已經完成。

使用回調函數的形式理解起來并不困難，但是實際的應用當中會有以下的缺點：

在需要多個操作的時候，會導致多個回調函數嵌套，導致代碼不夠直觀，就是常說的 Callback Hell。

如果幾個異步操作之間并沒有前后順序之分（例如不需要前一個請求的結果作為后一個請求的參數）時，同樣需要等待上一個操作完成再實行下一個操作。

為了解決上述的問題，Promise 對象應運而生，在 EMCAScript 2015 當中已經成為標準。

什么是 Promise

一個 Promise 對象可以理解為一次將要執行的操作（常常被用于異步操作），使用了 Promise 對象之后可以用一種鏈式調用的方式來組織代碼，讓代碼更加直觀。而且由于 Promise.all 這樣的方法存在，可以讓同時執行多個操作變得簡單。接下來就來簡單介紹 Promise 對象。

resolve 和 reject

首先來看一段使用了 Promise 對象的代碼。

function helloWorld (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello World!");
        } else {
            reject("Good bye!");
        }
    });
}

helloWorld(true).then(function (message) {
    alert(message);
}, function (error) {
    alert(error);
});

jsFiddle(請用現代瀏覽器打開)

上面的代碼實現的功能非常簡單，helloWord 函數接受一個參數，如果為 true 就打印 "Hello World!"，如果為 false 就打印錯誤的信息。helloWord 函數返回的是一個 Promise 對象。

在 Promise 對象當中有兩個重要方法————resolve 和 reject。

resolve 方法可以使 Promise 對象的狀態改變成成功，同時傳遞一個參數用于后續成功后的操作，在這個例子當中就是 Hello World! 字符串。

reject 方法則是將 Promise 對象的狀態改變為失敗，同時將錯誤的信息傳遞到后續錯誤處理的操作。

Promise 的三種狀態

上面提到了 resolve 和 reject 可以改變 Promise 對象的狀態，那么它究竟有哪些狀態呢？

Promise 對象有三種狀態：

Fulfilled 可以理解為成功的狀態

Rejected 可以理解為失敗的狀態

Pending 既不是 Fulfilld 也不是 Rejected 的狀態，可以理解為 Promise 對象實例創建時候的初始狀態

helloWorld 的例子中的 then 方法就是根據 Promise 對象的狀態來確定執行的操作，resolve 時執行第一個函數（onFulfilled），reject 時執行第二個函數（onRejected）。

then 和 catch then

helloWorld 的例子當中利用了 then(onFulfilld, onRejected) 方法來執行一個任務打印 "Hello World!"，在多個任務的情況下 then 方法同樣可以用一個清晰的方式完成。

function printHello (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello");
        } else {
            reject("Good bye!");
        }
    });
}

function printWorld () {
    alert("World");
}

function printExclamation () {
    alert("!");
}

printHello(true)
    .then(function(message){
        alert(message);
    })
    .then(printWorld)
    .then(printExclamation);

jsFiddle

上述例子通過鏈式調用的方式，按順序打印出了相應的內容。then 可以使用鏈式調用的寫法原因在于，每一次執行該方法時總是會返回一個 Promise 對象。另外，在 then onFulfilled 的函數當中的返回值，可以作為后續操作的參數，因此上面的例子也可以寫成：

printHello(true).then(function (message) {
    return message;
}).then(function (message) {
    return message  + " World";
}).then(function (message) {
    return message + "!";
}).then(function (message) {
    alert(message);
});

jsFiddle

同樣可以打印出正確的內容。

catch

catch 方法是 then(onFulfilled, onRejected) 方法當中 onRejected 函數的一個簡單的寫法，也就是說可以寫成 then(fn).catch(fn)，相當于 then(fn).then(null, fn)。使用 catch 的寫法比一般的寫法更加清晰明確。

Promise.all 和 Promise.race

Promise.all 可以接收一個元素為 Promise 對象的數組作為參數，當這個數組里面所有的 Promise 對象都變為 resolve 時，該方法才會返回。

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});

上面的例子模擬了傳輸兩個數據需要不同的時長，雖然 p2 的速度比 p1 要快，但是 Promise.all 方法會按照數組里面的順序將結果返回。

日常開發中經常會遇到這樣的需求，在不同的接口請求數據然后拼合成自己所需的數據，通常這些接口之間沒有關聯（例如不需要前一個接口的數據作為后一個接口的參數），這個時候 Promise.all 方法就可以派上用場了。

還有一個和 Promise.all 相類似的方法 Promise.race，它同樣接收一個數組，不同的是只要該數組中的 Promise 對象的狀態發生變化（無論是 resolve 還是 reject）該方法都會返回。

兼容性

最后是關于 Promise 對象的兼容性問題。

在瀏覽器端，一些主流的瀏覽器都已經可以使用 Promise 對象進行開發，在 Node.js 配合 babel 也可以很方便地使用。

如果要兼容舊的瀏覽器，建議可以尋找一些第三方的解決方案，例如 jQuery 的 $.Deferred。

感謝你的閱讀，有不足之處請為我指出。

參考

JavaScript Promise迷你書（中文版）

本文同步于我的個人博客 http://blog.acwong.org/2015/06/22/es6-promise/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85753.html

談談ES6前后的異步編程

摘要：回調函數這是異步編程最基本的方法。對象對象是工作組提出的一種規范，目的是為異步編程提供統一接口。誕生后，出現了函數，它將異步編程帶入了一個全新的階段。更多詳情點擊http://blog.zhangbing.club/Ja... Javascript 語言的執行環境是單線程的，如果沒有異步編程，根本沒法用，非卡死不可。為了解決這個問題，Javascript語言將任務的執行模式分成兩種...

fizz 2019-08-22 18:25 評論0 收藏0
微信小程序踩坑系列——從wx.request談談異步處理

摘要：其實我們在同步流程中才說返回，異步沒有返回這個概念或者說異步返回是沒有意義的，異步對應的是回調，也就是說，對于一個異步函數，我們應該傳入一個回調函數來接收結果。原文鏈接：https://www.xksblog.top/talk-... 見到wx.request的第一眼，就讓我想起了$.ajax這東西，使用起來確實有很多不方便，不能忍，幸好小程序是支持ES6語法的，所以可以使用pro...

RdouTyping 2019-08-23 12:09 評論0 收藏0
談談JavaScript異步代碼優化

摘要：異步問題回調地獄首先，我們來看下異步編程中最常見的一種問題，便是回調地獄。同時使用也是異步編程最基礎和核心的一種解決思路。基于，目前也被廣泛運用，其是異步編程的一種解決方案，比傳統的回調函數解決方案更合理和強大。關于微信公眾號：前端呼啦圈（Love-FED）我的博客：勞卜的博客知乎專欄：前端呼啦圈前言在實際編碼中，我們經常會遇到Javascript代碼異步執行的場景...

chnmagnus 2019-08-22 17:08 評論0 收藏0
JavaScript 異步編程的四種方式

摘要：異步編程是每個使用編程的人都會遇到的問題，無論是前端的請求，或是的各種異步。本文就來總結一下常見的四種處理異步編程的方法。利用一種鏈式調用的方法來組織異步代碼，可以將原來以回調函數形式調用的代碼改為鏈式調用。異步編程是每個使用 JavaScript 編程的人都會遇到的問題，無論是前端的 ajax 請求，或是 node 的各種異步 API。本文就來總結一下常見的四種處理異步編程的方法。...

microelec 2019-08-20 17:36 評論0 收藏0
ES6系列文章 Promise

摘要：已成功，內部執行了方法，實例處于狀態，狀態不可改變了。實際上是函數的一種簡寫形式，當執行后，可以被的回調函數接收處理。該語句并未執行若內部發生錯誤，會被自動的執行。靜態函數返回一個成功的對象，靜態函數返回一個拒絕狀態的對象。視頻講解 ES6的 Promise 是個啥哩？，是個承諾。為了解決 js 回調地獄。Promise 給我的體會是: 開始云里霧里，然后越用越好用。今天才明白承諾是...

thekingisalwaysluc 2019-08-21 16:51 評論0 收藏0