關於 Promise 的一些簡單理解

一、ES6 中的 Promise

1、JS 如何解決 異步問題？

（1）什么是 同步、異步？
　　同步指的是 需要等待 前一個處理 完成，才會進行 下一個處理。
　　異步指的是 不需要等待 前一個處理 完成，就可以進行下一個處理。

（2）JS 是單線程 還是 多線程的？
　　JS 是單線程的，也即執行處理時 采用 同步機制。而 JS 實現異步 是借助 瀏覽器的 多線程機制 完成的。
　　JS 作為瀏覽器的腳本語言，其根本目的是 實現用戶 與 瀏覽器進行交互，假如現在用戶 需要刪除一個節點 A，但同時又向節點 A 中添加節點 時，若 JS 為多線程，則一個線程用於刪除，一個線程用於添加，那此時瀏覽器應該以哪個線程為准，這就涉及到了復雜的同步問題。而 JS 若為單線程，則按實際順序執行即可，不必擔心線程之間的沖突。

（3）JS 如何解決同步、異步問題？
　　JS 是單線程的，也即意味着 下一個任務 需要等待 上一個任務完成后才會去處理，如果上一個任務執行時間非常長，那么將會陷入長時間等待，此方式肯定不可取。
　　那么可以將 需要長時間處理 或者 不需要立即處理 的任務 抽取出來，等待其 處理完成后 再去執行，從而使 JS 可以繼續處理下一個任務。也即 異步處理。
　　JS 是借助 瀏覽器的多線程機制 去實現異步處理。

【實現異步大致流程：】
Step1：將 JS 執行過程視為 主線程，也即同步執行 JS 中的代碼。
Step2：主線程執行過程中，若發現了異步任務，則將其交給瀏覽器（瀏覽器創建多個線程），繼續進行下一步處理。
    且維護一個 異步任務結果隊列（回調函數隊列），異步任務完成后，向 異步任務結果隊列 中 放置一個事件（即 回調函數）。
Step3：主線程執行完 所有的同步代碼后，開始監聽 回調函數 隊列，若發現 某個回調函數 狀態已完成，則執行該回調函數。

 

2、什么是 Promise？

（1）簡單理解？
　　Promise 是異步編程的一種解決方案。可以理解為一個容器，里面保存着未來才會結束的某個操作（異步操作）的結果，通過 Promise 對象可以獲取異步操作的結果。

（2）直觀理解一下？
　　直接使用 console.dir(Promise) 控制台打印一下 Promise 對象的屬性。
　　如下圖所示，Promise 為一個構造函數，通過 new Promise() 構建出來的對象可有相應的 catch、then 等方法。

 

 

（3）Promise 的特點
特點一：對象的狀態不受外界影響。
　　Promise 有三種狀態，Pending (進行中)、Resolved (解決)、Rejected (失敗)。
　　只有異步操作的結果能決定 Promise 處於哪種狀態，其余操作無法改變該狀態，無法中途取消操作。

特點二：狀態改變后，不再變化。
　　狀態改變的情況，Pending -> Resolved 、 Pending -> Rejected。
　　一旦狀態改變，其不會再改變。

（4）如何使用？
　　需要使用 new 去實例化一個 Promise 對象，參數為 一個函數。
　　函數的參數為 resolve、reject ，分別表示兩個回調函數，由 JavaScript 引擎提供。
　　resolve 回調函數是改變狀態， Pending -> Resolved ，即異步操作成功后調用，並將異步操作的成功結果作為參數向外傳遞。
　　reject 回調函數也是改變狀態， Pending -> Rejected，即異步操作失敗后調用，並將異步操作的失敗結果作為參數向外傳遞。
　　使用 then 方法可以處理 resolve、reject 傳遞出來的結果。其接受兩個回調函數作為參數。第一個回調函數用來處理 resolve 傳遞的結果，第二個回調函數用來處理 reject 傳遞的結果。第二個回調函數可選。
　　一般情況下，可使用 catch 方法處理 reject 傳遞出來的結果。其作用等價於 then 方法中的第二個回調函數。

注：
　　new promise() 的過程仍屬於同步（同步觸發 異步操作），
　　而進行 then()、catch() 的過程才真正意義上屬於 異步（也即回調狀態變化后觸發）。

【格式一：（直接通過對象操作）】
var promise = new Promise((resolve, reject) => {
    if(異步操作成功) {
        resolve(data);
    } else {
        reject(error);
    }
});

promise.then((data) => {
    // 成功的操作
}).catch((error) => {
    // 失敗的操作
});

【格式二：（封裝成方法進行操作）】
function promise() {
    return new Promise((resolve, reject) => {
        if(異步操作成功) {
            resolve(data);
        } else {
            reject(error);
        }
    });
}

promise().then((data) => {
    // 成功的操作
}).catch((error) => {
    // 失敗的操作
});

 

（5）比較一下 Promise 與 回調函數的區別
　　new Promise() 返回一個 promise 對象，通過其 then() 方法處理 異步成功的 后續操作，也即相當於異步成功后 進行 回調函數處理。
　　那直接傳 回調函數 並處理不也一樣嗎？如下代碼功能相同。

【Promise 寫法：】
function promise() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            resolve('隨便什么數據');
        }, 2000);
    });
}

promise().then((data) => {
    console.log(data);
});

【callback 寫法：（功能等同於上一種寫法）】
function promise2(callback) {
    //做一些異步操作
    setTimeout(callback, 2000);
}

promise2(function() {
    console.log('回調函數')
});

 

那為什么還要引入 promise 呢？promise 另一個特點就是可以 鏈式調用，當出現 多層回調時，可以簡化代碼的處理（比 callback 寫法更簡單、靈活）。
callback 多層回調，一層套一層，不易維護。而 promise 可以隨時切換 下一個回調的邏輯（通過 then 指定下一個回調處理），從而簡化代碼的處理。

【Promise 寫法：（then 方法可以向后接着傳遞 promise 對象 或者 直接傳遞值，實現多層回調）】
function promise() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第一次回調');
            resolve('隨便什么數據');
        }, 2000);
    });
}

function promise2() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第二次回調');
            resolve('隨便什么數據');
        }, 2000);
    });
}

function promise3() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第三次回調');
            resolve('隨便什么數據');
        }, 2000);
    });
}

promise().then((data) => {
    console.log(data);
    return promise2();
}).then((data) => {
    console.log(data);
    return promise3();
}).then((data) => {
    console.log(data);
    return '第四次回調';
}).then((data) => {
    console.log(data);
});

【callback 寫法：（功能等同於上一種寫法，但是一層套一層，容易出錯，維護起來也麻煩）】
function promise4(callback) {
    //做一些異步操作
    setTimeout(callback, 2000);
}

function callback() {
    setTimeout(function() {
        console.log("第一次回調");
        callback2();
    }, 2000);
}

function callback2() {
    setTimeout(function() {
        console.log("第二次回調");
        callback3();
    }, 2000);
}

function callback3() {
    setTimeout(function() {
        console.log("第三次回調");
    }, 2000);
}

promise4(callback());

 

（6）promise 關於 all() 的使用
　　all() 提供了 同步執行異步操作的能力，其接收 promise 數組作為參數，表示當 所有的異步 pormise 均處理完成后 才會 繼續執行。
　　所有異步操作會 同時處理，全部成功后，會將所有異步返回的數據 封裝成數組並 傳遞給 then()，若有一個異步處理失敗，則其會進入 catch()。
注：
　　all() 最終完成時間 以 最慢的異步操作為准，所有異步操作均成功后才會被 then 處理。
　　all() 提供同步觸發 promise 異步操作的過程，若在某個中間 promise 中定義了死循環，那么后面的 js 代碼將都會被卡死、不會執行。

使用場景：
　　適用於需要同時執行多個異步操作的場景。
　　比如：游戲加載頁面，需要異步加載資源文件，等待所有資源加載完畢后，開始執行游戲。

【all() 舉例：】
function promise() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第一次回調');
            resolve('第一次回調成功');
        }, 2000);
    });
}

function promise2() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第二次回調');
            resolve('第二次回調成功');
        }, 2000);
    });
}

Promise.all([promise(), promise2()])
.then(function(results) {
    console.log("2 個回調全部執行成功");
    console.log(results);
}).catch(function(errors) {
    console.log("2 個回調中至少一個執行失敗");
    console.log(errors);
});

【輸出結果：】
第一次回調
第二次回調
2 個回調全部執行成功
["第一次回調成功", "第二次回調成功"]

 

（7）promise 關於 race() 與 any() 的使用
　　race() 、any() 也可以同步處理多個 異步操作，但是稍微有些區別。
　　any() 強調的是 多個異步操作中，第一個成功執行的 異步操作，會進入 then() 中，若全部失敗，則進入 catch()。
　　race() 強調的是 多個異步操作中，第一個執行完成的 異步操作，若第一個執行完成的操作出錯，則進入 catch()，否則進入 then()。

使用場景：
　　race() 可用於給某個 異步請求 設置超時時間。
　　比如： A 異步操作執行時間為 0~10 秒，B 異步操作執行時間為 5 秒，若 A 操作在 5 秒內完成，則執行 A 的結果，否則執行 B 的結果。

　　any() 可用於獲取加載系統資源。
　　比如：有多個服務器存放相同的資源，可以使用 any() 通過多個異步操作 分別訪問這些服務器，哪個 異步操作 先成功完成，則使用哪個服務器的資源。

【race(): 針對第一個執行完成的異步操作，成功進入 then()，出錯進入 catch()】
function promise() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第一次回調');
            reject('第一次回調失敗');
        }, 1000);
    });
}

function promise2() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第二次回調');
            resolve('第二次回調成功');
        }, 2000);
    });
}

Promise.race([promise(), promise2()])
.then(function(results) {
    console.log('第一次成功')
    console.log(results);
}).catch(function(errors) {
    console.log('第一次失敗')
    console.log(errors);
});

【輸出結果：】
第一次回調
第一次失敗
第一次回調失敗
第二次回調


【any()： 針對第一個執行成功的操作，執行成功進行 then()，全部執行失敗則執行 catch()】
function promise() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第一次回調');
            reject('第一次回調失敗');
        }, 1000);
    });
}

function promise2() {
    return new Promise((resolve, reject) => {
        //做一些異步操作
        setTimeout(function(){
            console.log('第二次回調');
            resolve('第二次回調成功');
        }, 2000);
    });
}

Promise.any([promise(), promise2()])
.then(function(results) {
    console.log('至少有一個成功')
    console.log(results);
}).catch(function(errors) {
    console.log('全部失敗')
    console.log(errors);
});

【輸出結果：】
第一次回調
第二次回調
至少有一個成功
第二次回調成功

 

二、jQuery 中的 Promise

1、$.Deferred()

（1）簡單理解
　　Deferred 是 jQuery 實現 異步編程的一種解決方案，使用起來與 Promise 類似，也可以實現鏈式調用。通過 Deferred 對象可以獲取異步操作的結果。

（2）直觀了解一下？
　　直接使用 console.dir($.Deferred()) 控制台打印一下 Deferred 對象的屬性。
　　如下圖所示，$.Deferred() 返回一個對象，稱其為 Deferred 對象，可以看到其內部定義了一些方法：resolve()、reject()、done()、fail() 等。通過這些方法接收、傳遞 回調函數 從而實現 異步調用。

 

 

（3）$.Deferred() 的使用？
　　使用基本上與 Promise 類似，但是語法糖上有些許差別。
　　比如：Promise 中的 then()、catch() 與 Deferred 中的 then()、done()、fail() 功能相同。

【常用方法：】
（1）jQuery.Deferred(function)  或者  $.Deferred(function)    
    創建一個新的 Deferred 對象，function 是可選參數，若存在則在構建 Deferred 對象后執行。
    
（2）deferred.then(resolve, reject)
    異步操作結束后觸發，resolve 表示異步操作成功后觸發的回調函數， reject 表示異步操作失敗后觸發的回調函數。
    
（3）deferred.done()
    異步操作成功后觸發的回調函數，等同於 then() 中的 resolve。
    
（4）deferred.fail()
    異步操作失敗后觸發的回調函數，等同於 then() 中的 reject。
    
（5）deferred.resolve()
    手動將 異步操作狀態 變為 解決，會立即觸發 done()。
    
（6）deferred.reject()
    手動將 異步操作狀態 變為 失敗，會立即觸發 fail()。
    
（7）deferred.always()
    不管異步操作是成功還是失敗，均會執行。

（8）deferred.promise()
    在原來 deferred 對象的基礎上返回一個受限的 deferred 對象。
    受限指的是 指開放與 狀態變化無關的方法（done、fail 等），不開放 與 狀態變化有關的方法（resolve、reject）。
    即無法從外部主動改變當前 deferred 對象的狀態。

　　通過上面的方法介紹，可以看到 Deferred 其實用起來與 Promise 很類似。稍稍有些許差別。
比如：Deferred 對象可以直接調用其 resolve、reject 方法直接去改變當前異步操作的狀態，當然這樣的操作是有風險的，畢竟異步操作有了提前結束的可能。而其調用 promise 方法可以返回一個受限的對象，無法主動結束異步操作，此時的情況就與 Promise 的使用類似了。

【Deferred 用法舉例：（調用 promise 方法返回受限的 Deferred 對象）】
function testDeferred() {
    let deferred = $.Deferred(); // 創建一個 Deferred 對象
    
    setTimeout(function() {
        // 手動改變狀態
        deferred.resolve("調用成功");
    }, 2000);
    
    return deferred.promise();
}

testDeferred().then(data => {
    console.log(data);
});

【Promise 用法舉例：（與上面 Deferred 效果是一致的）】
function testPromise() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            // 手動改變狀態
            resolve("調用成功");
        }, 2000);
    });
}

testPromise().then(data => {
    console.log(data);
});

【Deferred 用法舉例：（Deferred 未受限時，在外部可以直接改變 異步操作狀態，提前結束異步操作）】
function testDeferred() {
    let deferred = $.Deferred(); // 創建一個 Deferred 對象
    
    setTimeout(function() {
        // 手動改變狀態
        deferred.resolve("調用成功");
    }, 2000);
    
    return deferred;
}

let deferred = testDeferred(); // 獲取到 Deferred 對象

deferred.then(function(data) {
    // 異步操作成功后執行
    console.log(data);
}, function(error) {
    // 異步操作失敗后執行
    console.log(error);
}).always(function() {
    // 異步操作成功或者失敗都會執行
    console.log("總是執行")
});

deferred.reject("執行失敗"); // 會直接改變 異步操作狀態為 失敗

 

2、$.when()、$.ajax()

（1）$.when()
　　$.when() 功能與 Promise 中的 all() 方法類似，都是同步執行（觸發） 多個異步操作，並在所有異步操作執行完成后才會去 調用回調函數。
　　不過 all() 接收的參數為 promise 數組，then() 接收的參數為 數組形式。
　　而 $.when() 接收的參數是多個 Deferred 對象，then() 接收的參數 與 Deferred 結果一一對應。

【$.when() 舉例：】
function testDeferred() {
    let deferred = $.Deferred(); // 創建一個 Deferred 對象
    
    setTimeout(function() {
        // 手動改變狀態
        deferred.resolve("第一個回調調用成功");
    }, 2000);
    
    return deferred.promise();
}

function testDeferred2() {
    let deferred = $.Deferred(); // 創建一個 Deferred 對象
    
    setTimeout(function() {
        // 手動改變狀態
        deferred.resolve("第二個回調調用成功");
    }, 3000);
    
    return deferred.promise();
}

$.when(testDeferred(), testDeferred2()).then(function(data, data2) {
    // 異步操作成功后執行
    console.log(data);
    console.log(data2)
}, function(error) {
    // 異步操作失敗后執行
    console.log(error);
});

【輸出結果：（等待三秒）】
第一個回調調用成功
第二個回調調用成功

 

 

（2）$.ajax()
　　$.ajax() 可以理解成一個 受限的 Deferred 對象，也即前面提到的 不能改變異步狀態的 Deferred 對象（沒有 resolve、reject 方法）。
　　雖然使用起來與 Deferred 類似，但是 $.ajax() 語法糖還是有些許不同。比如：ajax 中的 success、error、complete 方法分別對應 deferred 中的 done、fail、always 方法。

 

 

【基本寫法：】
$.ajax({
    url: "https://www.cnblogs.com/l-y-h/",
    success: function(data) {
        console.log("成功");
        console.log(data);
    },
    error: function(error) {
        console.log("失敗");
        console.log(error)
    },
    complete: function() {
        console.log("總是執行");
    }
})

【鏈式寫法：】
$.ajax("https://www.cnblogs.com/l-y-h/").success(function(data) {
    console.log("成功");
    console.log(data);
}).error(function(error) {
    console.log("失敗");
    console.log(error)
}).complete(function() {
    console.log("總是執行");
});

【鏈式寫法：（等同於上一種鏈式寫法）】
$.ajax("https://www.cnblogs.com/l-y-h/").done(function(data) {
    console.log("成功");
    console.log(data);
}).fail(function(error) {
    console.log("失敗");
    console.log(error)
}).always(function() {
    console.log("總是執行");
});