## 前言

今天來分享下promise的用法，es6偉大發明之一，當初我學習的時候也是蠻頭大的，不知道為啥，整個腦子就是，我在哪，我要干啥的懵圈，后面認真學習之后，覺得真是十分好用，下面就來一起學習下吧。

為什么會有promise

首先為什么會有promise的存在，其實很多人都知道的，其中最大的問題就是在處理多個有依賴關系的異步操作時，會出現回調地獄（ callback hell ），如下：

$.ajax({url:?'....',success:?function?(data)?{$.ajax({url:?'....',success:?function?(data)?{}});}});

promise提供了一個優雅的方式，來解決這個問題，同時提供了很多的錯誤捕獲機制。

如何使用promise

我們先不講promise的理論語法，這樣會一開始就降低學習的欲望，直接來看使用案例，然后去理解。

首先看基本使用

new Promise(function (resolve, reject) {// 假設此處是異步請求某個數據$.ajax({url:?'......',success:?function?(res)?{if (res.code === 200) {resolve(res.data);} else {reject('獲取data失敗');}}})
})
.then(function A(data) {// 成功，下一步console.log( data);}, function B(error) {// 失敗，做相應處理console.log(error)});
console:
sucess
error

解析：

梳理流程：

• 首先我們在promise函數里，執行我們的異步操作得到data
• 如果成功的話，通過resolve函數數據傳遞出來，如果失敗。通過reject把錯誤信息傳遞出來
• 然后在.then里可以接受傳遞出來的數據，.then()里面接受兩個函數，第一個函數接收resolve傳遞出來的值，也就是正確情況下的處理，第二個函數接收reject傳遞的信息，也就是錯誤的情況下的處理。

Promise是一個對象，它的內部其實有三種狀態。

• 初始狀態（ pending ）。
• 已完成（ fulfilled ）： Promise 的異步操作已結束成功。
• 已拒絕（ rejected ）： Promise 的異步操作未成功結束。

resolve 方法可以使 Promise 對象的狀態改變成成功，同時傳遞一個參數用于后續成功后的操作。
reject 方法則是將 Promise 對象的狀態改變為失敗，同時將錯誤的信息傳遞到后續錯誤處理的操作。

then(onFulfilled, onRejected)

---(onFulfilled, onRejected)

鏈式then

當然，我們既然解決回調地獄，一個異步，看不出來啥優勢，現在看多個異步請求, 為了代碼簡約，我們用setTimeout來代替ajax請求 作為異步操作，如下：

new Promise((resolve, reject) => {setTimeout( () => {if （...）{resolve（[1, 2, 3]）} else {reject('error');}}, 2000);
}).then( data => {console.log(value);  // 打印出[1, 2, 3]return new Promise( (resolve, reject)=> {   // 新的異步請求，需要promise對象let data2 = 1 + data;setTimeout( () => {if (...) {resolve(data2);} else {reject('error2')}}, 2000);});}, error => {cosnole.log(error)})
.then( data2 => {console.log(data2 );}, error => {cosnole.log(error)});

解析：

-這個例子中，第一個異步操作得到數據[1, 2, 3]，傳遞到第一個then中，我們在第一個then中運用拿到的數據，進行第二次異步操作，并把結果傳遞出去。在第二個then中拿到數據,并且捕獲error。
可以看到本來嵌套的兩個異步操作，現在清晰多了，而且鏈式接無數個then

在這里有兩個地方需要注意

• then里面的可捕獲錯誤的函數，可以捕獲到上面的所有then的錯誤，所以只在最后一個then里，寫錯誤捕獲函數就可以。
• 每次異步操作時候需要返回一個新的promise，因為只有用promise對象才會等異步操作執行完，才去執行下面的then，才能拿到異步執行后的數據，所以第二個then里的異步請求，也需要聲明Promise對象。如果then里面返回常量，可以直接返回。如下：

new Promise((resolve, reject) => {setTimeout( () => {if （...）{resolve（[1, 2, 3]）} else {reject('error');}}, 2000);
}).then( value => {return '222';    // 如果是直接返回常量，可直接return}).then( value2 => {console.log(value2 ); // 打印出222})

下面忽略error情況，看兩個例子，大家可以自己思考下打印結果

new Promise(resolve => {setTimeout( () => {resolve('value1');}, 2000);
}).then( value1 => {console.log(value1);(function () {return new Promise(resolve => {setTimeout(() => {console.log('Mr.Laurence');resolve('Merry Xmas');}, 2000);});}());return false;}).then( value => {console.log(value + ' world');});value1
false world
Mr.Laurence

new Promise( resolve => {console.log('Step 1');setTimeout(() => {resolve(100);}, 1000);
})
.then( value => {return new Promise(resolve => {console.log('Step 1-1');setTimeout(() => {resolve(110);}, 1000);}).then( value => {console.log('Step 1-2');return value;}).then( value => {console.log('Step 1-3');return value;});
})
.then(value => {console.log(value);console.log('Step 2');
});console:
Step 1
Step 1-1
Step 1-2
Step 1-3
110
Step 2

catch

catch 方法是 then(onFulfilled, onRejected) 方法當中 onRejected 函數的一個簡單的寫法，也就是說可以寫成 then(fn).catch(fn)，相當于 then(fn).then(null, fn)。使用 catch 的寫法比一般的寫法更加清晰明確。我們在捕獲錯誤的時候，直接在最后寫catch函數即可。

 let promise = new Promise(function(resolve, reject) {throw new Error("Explosion!");
});
promise.catch(function(error) {console.log(error.message); // "Explosion!"
});

上面代碼等于與下面的代碼

 let promise = new Promise(function(resolve, reject) {throw new Error("Explosion!");
});
promise.catch(function(error) {console.log(error.message); // "Explosion!"
});

異步代碼錯誤拋出要用reject

new Promise( resolve => {setTimeout( () => {throw new Error('bye');}, 2000);
})
.then( value => {})
.catch( error => {console.log( 'catch', error);});
控制臺會直接報錯 Uncaught Error: bye

解析：因為異步情況下，catch已經執行完了，錯誤才拋出，所以無法捕獲，所以要用reject，如下：

new Promise( (resolve, reject) => {setTimeout( () => {reject('bye');}, 2000);
})
.then( value => {console.log( value + ' world');})
.catch( error => {console.log( 'catch', error);});catch bye
利用reject可以抓捕到promise里throw的錯

catch 可以捕獲then里丟出來的錯，且按順序只抓捕第一個沒有被捕獲的錯誤

new Promise( resolve => {setTimeout( () => {resolve();}, 2000);
})
.then( value => {throw new Error('bye');})
.then( value => {throw new Error('bye2');})
.catch( error => {console.log( 'catch', error);});console: Error： bye

new Promise( resolve => {setTimeout( () => {resolve();}, 2000);
})
.then( value => {throw new Error('bye');})
.catch( error => {console.log( 'catch', error);})
.then( value => {throw new Error('bye2');})
.catch( error => {console.log( 'catch', error);});console: Error： bye
console: Error： bye2
catch 抓捕到的是第一個沒有被捕獲的錯誤

錯誤被捕獲后，下面代碼可以繼續執行

new Promise(resolve => {setTimeout(() => {resolve();}, 1000);
}).then( () => {throw new Error('test1 error');}).catch( err => {console.log('I catch：', err);   // 此處捕獲了 'test1 error'，當錯誤被捕獲后，下面代碼可以繼續執行}).then( () => {console.log(' here');}).then( () => {console.log('and here');throw new Error('test2 error');}).catch( err => {console.log('No, I catch：', err);  // 此處捕獲了 'test2 error'});I catch： Error: test2 error
here
and hereI catch： Error: test2 error

錯誤在捕獲之前的代碼不會執行

new Promise(resolve => {setTimeout(() => {resolve();}, 1000);
}).then( () => {throw new Error('test1 error');}).catch( err => {console.log('I catch：', err);   // 此處捕獲了 'test1 error'，不影響下面的代碼執行throw new Error('another error'); // 在catch里面丟出錯誤，會直接跳到下一個能被捕獲的地方。}).then( () => {console.log('and here');throw new Error('test2 error');}).catch( err => {console.log('No, I catch：', err);  // 此處捕獲了 'test2 error'});I catch： Error: test2 error
I catch： Error: another error

new Promise(resolve => {setTimeout(() => {resolve();}, 1000);
}).then( () => {console.log('start');throw new Error('test1 error');}).then( () => {console.log('arrive here');}).then( () => {console.log('... and here');throw new Error('test2 error');  }).catch( err => {console.log('No, I catch：', err);   // 捕獲到了第一個});No, I catch： Error: test1 errorat Promise.then (<anonymous>:8:1

Promise.all

Promise.all([1, 2, 3]).then( all => {console.log('1：', all);})
[1, 2, 3]

Promise.all([function () {console.log('ooxx');}, 'xxoo', false]).then( all => {console.log( all);});[?, "xxoo", false]

let p1 = new Promise( resolve => {setTimeout(() => {resolve('I\'m P1');}, 1500);
});
let p2 = new Promise( (resolve, reject) => {setTimeout(() => {resolve('I\'m P2');}, 1000);});
let p3 = new Promise( (resolve, reject) => {setTimeout(() => {resolve('I\'m P3');}, 3000);});Promise.all([p1, p2, p3]).then( all => {console.log('all', all);
}).catch( err => {console.log('Catch：', err);
});all (3)?["I'm P1", "I'm P2", "I'm P3"]

案例：刪除所有數據后，做一些事情、、、、
db.allDocs({include_docs: true}).then(function (result) {return Promise.all(result.rows.map(function (row) {return db.remove(row.doc);}));
}).then(function (arrayOfResults) {// All docs have really been removed() now!
});

Promise.resolve

Promise.resolve().then( () => {console.log('Step 1');})

其他

Promise.resolve('foo').then(Promise.resolve('bar')).then(function (result) {console.log(result);
});
VM95:2 foo
如果你向 then() 傳遞的并非是一個函數（比如 promise）
它實際上會將其解釋為 then(null)，這就會導致前一個 promise 的結果會穿透下面

How do I gain access to resultA here?

function getExample() {return promiseA(…).then(function(resultA) {// Some processingreturn promiseB(…);}).then(function(resultB) {// More processingreturn // How do I gain access to resultA here?});
}

解決 Break the chain

function getExample() {var a = promiseA(…);var b = a.then(function(resultA) {// some processingreturn promiseB(…);});return Promise.all([a, b]).then(function([resultA, resultB]) {// more processingreturn // something using both resultA and resultB});
}