關於promise的學習和拓展

Promise的學習和拓展

---

之前開發的時候偶爾會在請求中，或者其餘場景中用到promise,只知道它是什麼（鏈式調用，用於請求的後返回值得操做之類的）,大概怎麼用，卻沒有深刻了解。

原由：（在參考了廖雪峯的promise講解後https://www.liaoxuefeng.com/w...）

在javascript中，全部的代碼都是單線程進行的。
因爲這個「缺陷」，致使JavaScript的全部網絡操做，瀏覽器事件，都必須是異步執行。異步執行能夠用回調函數實現（否者在加載完js文件後。其餘操做也不會發生了）：

參數：executor是帶有 resolve 和 reject 兩個參數的函數 。Promise構造函數執行時當即調用executor 函數， resolve 和 reject 兩個函數做爲參數傳遞給executor（executor 函數在Promise構造函數返回所建promise實例對象前被調用）。resolve 和 reject 函數被調用時，分別將promise的狀態改成fulfilled（完成）或rejected（失敗）。executor 內部一般會執行一些異步操做，一旦異步操做執行完畢(可能成功/失敗)，要麼調用resolve函數來將promise狀態改爲fulfilled，要麼調用reject 函數將promise的狀態改成rejected。若是在executor函數中拋出一個錯誤，那麼該promise 狀態爲rejected。

由此能夠知道，一個promise包含3個狀態:(注意，不包含resolve
)
pending: 初始狀態，既不是成功，也不是失敗狀態。
fulfilled: 意味着操做成功完成。
rejected: 意味着操做失敗。

function callback() {
    console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 0); // 1秒鐘後調用callback函數
console.log('after setTimeout()');

觀察上述代碼執行，在Chrome的控制檯輸出能夠看到：

before setTimeout()
after setTimeout()
Done

AJAX就是典型的異步操做

var ajax = ajaxGet('http://...');
ajax.ifSuccess(success)
    .ifFail(fail);

統一執行AJAX邏輯，不關心如何處理結果，而後，根據結果是成功仍是失敗，在未來的某個時候調用success函數或fail函數。
這個時候promise方法就應運而生了。

---

一個簡單的promise應用
生成一個0-2之間的隨機數，若是小於1，則等待一段時間後返回成功，不然返回失敗：

function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}

有了執行函數，咱們就能夠用一個Promise對象來執行它，並在未來某個時刻得到成功或失敗的結果：

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
    console.log('成功：' + result);
});
var p3 = p2.catch(function (reason) {
    console.log('失敗：' + reason);
});

也能夠寫成鏈式調用的形式

new Promise(test).then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失敗：' + reason);
});