ES6系列文章 Promise

視頻講解

ES6的 Promise 是個啥哩？，是個承諾。爲了解決 js 回調地獄。Promise 給個人體會是: 開始雲裏霧裏，而後越用越好用。今天才明白承諾是什麼意思？好比我本身的承諾，若是減肥成功就買個iphone,若是減肥失敗就去死~,哈哈然而我並不會。

基本語法

new Promise((resolve, reject) => {
    // ...
});

resolve, reject 方法由 js 引擎提供，不須要我的編寫。

Promise 的三種狀態

1. pending (進行中)， 執行了 new Promise() 命令後，promise實例就處於 pending 的狀態。
2. fullfilled(已成功)，promise 內部執行了 resolve 方法，promise實例處於fullfilled狀態，狀態不可改變了。
3. rejected(已失敗), promise 內部執行了reject 方法，promise 實例處於rejected狀態，一樣不可更改。

Promise.prototype 方法 then和catch

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('hello resolve');
    }, 500);
})
.then(val => {
    console.log(val);// hello resolve
}, err => {
    console.error(err);// 該條語句不被執行
});

then最多有兩個參數，參數一爲 resolve 後回調的函數，參數二爲 reject 後的回調函數。then也能夠只接收參數一。

new Promise((resolve, reject) => {
   setTimeout(() => {
       reject('hello reject');
   }, 500);
})
.then(val => {
   console.log(val);
}, err => {
   console.error(err);// hello reject
});

catch其實是 then 函數的一種簡寫形式，當執行 reject 後，能夠被catch 的回調函數接收處理。

new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('hello reject');
    }, 500);
})
.catch(err => {
    console.log(err); // hello reject
});

再談談 Promise 對象的異常處理

在 promise 內部發生錯誤後不會被外層環境捕捉到。

try {
    new Promise((resolve, reject) => {
        console.log(e);
    });
} catch(e) {
    console.log('error is catched? ', e);// 該語句並未執行
}

若 promise 內部發生錯誤，會被自動的執行reject。

new Promise((resolve, reject) => {
    console.log(e);
})
.catch(err => {
    console.log('error be rejected?', err);// error be rejected? ReferenceError: e is not defined
});

再來看看promise的鏈式調用吧

let p = new Promise((resolve, reject) => {
    resolve('i am resolved');
})
.then(val => {
    return val;
});
console.log(p);// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

在 then 中 return 的值又變成了 promise對象。

p.then(val => {
    console.log(val);// i am resolved
});

這個也爲鏈式調用提供了基礎。

Promise 的靜態方法 all race resolve reject

all

all靜態方法接收promise 對象的數組，並返回一個 promise 對象。當數組中的全部元素都 resolve 時，結果promise被 resolve。若數組中有一個對象被 reject 了，結果promise對象被reject。本人常常使用 all方法來處理多個 ajax 請求獲取數據的界面loading 效果。

let isLoading = true;
let p1 = fetch(url1).then(json => {
    // ....
});
let p2 = fetch(url2).then(json => {
    // ...
});
let p3 = fetch(url3).then(json => {
    // ...
});
Promise.all([p1, p2, p3]).then(() => {
    isLoading = false;
});

race

一樣接收一個數組,結果也是一個 promise 對象，當數組中的promise 對象有一個的狀態改變時，race方法的結果promise對象變爲相同的狀態。具體應用場景筆者尚未遇到過。如有人遇到過，請在下面留言告知一下，感激涕零。

resolve、reject

靜態函數Promise.resolve返回一個成功的promise對象，靜態函數Promise.reject返回一個拒絕狀態的 promise 對象。

refs

MDN Promise

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。