讓你從頭至尾把promise整的明明白白
最近一直私下在看Android項目，前端這一塊沒怎麼仔細研究。昨天在寫重構公司前端項目的時候，我發現一旦有異步的任務，腦海裏麪條件反射通常的出現promise的字樣。重構的多了 心就就在納悶：既然promise這麼好用，我能不能本身手寫一個promise呢？我思索了半天，按照本身的想法模擬了出來，可是和一位大佬交流的時候，他說個人寫法並無遵循Promise/A+規範。當時我內心是懵逼的，加班的時候就一直想寫這個問題。javascript
1、 promise是什麼？
1.一、 爲何要用promise？
咱們都知道，在javascript裏面全部的代碼都是單線程執行的。因爲這種「單線程」的弊端，全部javascript重的網絡請求、瀏覽器事件等都只能用異步來執行。傳統的異步實現的方式都是用回調函數來實現的，例如：前端
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === RESULT_OK) {
return success(req.responseText);
}
return fail(req.status);
}
}
複製代碼
這樣雖然比較直觀，可是並不符合程序員的審美習慣，代碼的複用性也很低。按照如今主流的代碼風格來講，一份優秀的代碼模版就應該是鏈表形式的。java
// Android寫習慣了，通常封裝網絡都是okhttp 。不用理我 = =
okhttp.request()
.onSuccesul()
.onFail();
複製代碼
因而promise應運而生。程序員
1.二、 promise介紹
promise的中文釋意爲：承諾。我以爲這個翻譯很能凸顯這個對象的含義。數組
promise裏面有三個狀態：promise
- pending：進行中
- fulfilled： 已成功
- rejected：已結束
爲何說，承諾這個解釋很能凸顯promise對象的特性呢？咱們來爲您談談promise裏面的兩個特色：瀏覽器
一、 對象不能被任何手段來更改。怎麼解釋呢？只要是你下了承諾，就不能受任何外界環境的干擾，只受到一步操做的結果來決定。 二、 一旦狀態改變，就不會再變，而且任什麼時候候均可以獲得這個結果。緩存
從上面的特性裏面，是否是更加加深了對承諾的理解呢！bash
2、 promise簡單探究。
前面說了這麼多，都是傻把式，下面咱們就用代碼體驗一把promise的快感吧 。微信
new Promise((resolve,reject)=>{
let randomNumber = Math.random()
console.log(randomNumber)
if(randomNumber>0.5){
resolve('success!!!')
}else{
reject('fail!!!')
}
}).then(res=>{
console.log(res);
},error=>{
console.log(error);
})
複製代碼
從上面的代碼咱們能夠比較清楚的發現，Promise接收兩個參數：resolve和reject。resolve函數的做用是，將Promise對象的狀態從「進行中」變爲「成功」（ pending => resolved），在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；reject函數的做用是，將Promise對象的狀態從「進行中」變爲「失敗」（ pending=>rejected），在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。
而且在Promise對象實例生成後，能夠用then來分別指定完成後的resolve和reject。而且then裏面的reject是可選項。
對於promise，我以爲主要有三個點須要給讀者講一下，來看下面一段代碼：
let promise = new Promise((resolve,reject)=>{
let randomNumber = Math.random()
console.log(randomNumber)
if(randomNumber>0.5){
resolve('success!!!')
}else{
reject('fail!!!')
}
})
複製代碼
咱們發現單獨運行這一段代碼的話，console依然被打印出來了。這說明promise是建立的時候就被運行的。 再來看一段代碼：
let promise = new Promise((resolve,reject)=>{
let randomNumber = Math.random()
if(randomNumber>0.5){
resolve('success!!!')
}else{
reject('fail!!!')
}
console.log(randomNumber)
}).then(res=>{
console.log(res);
},error=>{
console.log(error)
})
複製代碼
效果以下：
return resolve('success!!!');
return reject('fail!!!');
複製代碼
3、 promise重要屬性探究
2.一、 then
Promise 實例具備then方法，也就是說，then方法是定義在原型對象Promise.prototype上的。它的做用是爲 Promise 實例添加狀態改變時的回調函數。then裏面有兩個回調函數，前者返回resolve的回調函數，後者是可選值。而且then返回返回一個新的promise，這樣就能一直使用鏈式結構了。
2.二、 catch
catch能夠當作是then(null/undefined, reject)的別名 專門用來指定錯誤發生時的回調函數。那麼爲何要設計這個屬性呢？主要有兩個方面，首先來看下面一段代碼:
// 普通then
.then(res=>{
console.log(res);
},error=>{
console.log(error)
})
//catch
.then(res=>{
console.log(res);
})
.catch(error=>{
console.log(error)
})
複製代碼
明顯第二個相對前一個會更加優雅一點。
咱們再來看一段代碼:
// 普通then
.then(res=>{
throw Error("have exception")
console.log(res);
},error=>{
console.log(error)
})
// catch
.then(res=>{
throw Error("have exception")
}).catch(error=>{
console.log(error)
})
複製代碼
運行上面的代碼咱們很清楚的發現catch能捕獲到then的異常，可是then的reject回調裏面並不能捕獲到resolve的異常。這在必定程度上保證了代碼的正常運行順序。
2.三、 finally
finally是es2018才引入的屬性，無論 Promise 對象最後狀態如何，都會執行的操做。其本質也是then方法的特性。
promise
.finally(() => {
// ...
});
// 等同於
promise
.then(
result => {
// ...
return result;
},
error => {
// ...
throw error;
}
);
複製代碼
2.四、 all
Promise.all方法用於將多個 Promise 實例，包裝成一個新的 Promise 實例。其基礎的語法是：
const p = Promise.all([p1, p2, p3]);
複製代碼
Promise.all方法接受一個數組做爲參數，p一、p二、p3都是 Promise 實例，若是不是，就會先調用下面講到的Promise.resolve方法，將參數轉爲 Promise 實例，再進一步處理。 關於p的狀態，主要由接收的promise數組決定的 （1）只有p一、p二、p3的狀態都變成fulfilled，p的狀態纔會變成fulfilled，此時p一、p二、p3的返回值組成一個數組，傳遞給p的回調函數。 （2）只要p一、p二、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。
這裏值得咱們注意的一點是，若是p1,p2,p3中有錯誤 而且有本身的catch方法的時候。會調用其本身的catch，當沒有catch方法的時候纔會拋給p的catch來處理
2.五、 race
Promise.race方法一樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。其基礎的語法是：
const p = Promise.race([p1, p2, p3]);
複製代碼
和all方法不一樣的是： （1）只有p一、p二、p3的狀態都變成rejected，p纔會變成rejected （2） 若是p一、p二、p3中有一個狀態變成fulfilled，p的狀態就會變成fulfilled 並將首次變成fulfilled的返回值返回。
4、 初次手寫的promise
前面大概都將所謂的promise的用法給描述了一遍，大概寫一兩個例子就能感覺出promise的奧祕。那麼若是讓你本身來寫一個promise，你應該如何來寫呢？
這是我下班後寫的一個Promise：
const PENDING = "pending";
const RESOLVE = "resolve";
const REJECTED = "rejected";
function JPromise(fn){
const that = this;
that.state = PENDING;
that.value = null;
that.resolvedCallbacks = [];
that.rejectedCallbacks = [];
function resolve(value){
if(that.state === PENDING){
that.state = RESOLVE;
that.value = value;
that.resolvedCallbacks.map(cb=>cb(that.value));
}
}
function reject(value){
if(that.state === PENDING){
that.state = REJECTED;
that.value = value;
that.rejectedCallbacks.map(cb=>cb(that.value))
}
}
try{
fn(resolve,reject)
}catch(e){
reject(e)
}
}
JPromise.prototype.then = function(onFulfilled,onRejected){
onFulfilled = typeof onFulfilled === 'function'?onFulfilled:v=>v;
onRejected = typeof onRejected === 'function'?onRejected:r=>new Error(r);
if(this.state === PENDING){
this.resolvedCallbacks.push(onFulfilled)
this.rejectedCallbacks.push(onRejected)
}
if(this.state ===RESOLVE){
onFulfilled(this.value);
}
if(this.state === REJECTED){
onRejected(this.value)
}
}
複製代碼
而後運行一下：
new JPromise((resolve,rejected)=>{
resolve(1)
}).then(res=>{
console.log(res);
},error=>{
console.log(error);
})
複製代碼
而後自測了一下，完美能實現簡單的promise。可是跟大佬交流以後才知道：原來promise有本身的一套標準，我這套代碼雖然可以簡單的實現promise的功能 可是沒有達到那套標準。
5、 符合規範的promise
首先關於promise規範，我就簡單的提一下吧：
- 每一個then方法都返回一個新的Promise對象（原理的核心）
- 若是then方法中顯示地返回了一個Promise對象就以此對象爲準，返回它的結果
- 若是then方法中返回的是一個普通值（如Number、String等）就使用此值包裝成一個新的Promise對象返回。
- 若是then方法中沒有return語句，就視爲返回一個用Undefined包裝的Promise對象
- 若then方法中出現異常，則調用失敗態方法（reject）跳轉到下一個then的onRejected
- 若是then方法沒有傳入任何回調，則繼續向下傳遞（值的傳遞特性）。
最後張貼一下 我改進的代碼：
const PENDING = 'pending';//初始態
const FULFILLED = 'fulfilled';//初始態
const REJECTED = 'rejected';//初始態
function Promise(executor){
let self = this;//先緩存當前promise實例
self.status = PENDING;//設置狀態
//定義存放成功的回調的數組
self.onResolvedCallbacks = [];
//定義存放失敗回調的數組
self.onRejectedCallbacks = [];
//當調用此方法的時候，若是promise狀態爲pending,的話能夠轉成成功態,若是已是成功態或者失敗態了，則什麼都不作
function resolve(value){ //2.1.1
if(value!=null &&value.then&&typeof value.then == 'function'){
return value.then(resolve,reject);
}
//若是是初始態，則轉成成功態
//爲何要把它用setTimeout包起來
setTimeout(function(){
if(self.status == PENDING){
self.status = FULFILLED;
self.value = value;//成功後會獲得一個值，這個值不能改
//調用全部成功的回調
self.onResolvedCallbacks.forEach(cb=>cb(self.value));
}
})
}
function reject(reason){ //2.1.2
setTimeout(function(){
//若是是初始態，則轉成失敗態
if(self.status == PENDING){
self.status = REJECTED;
self.value = reason;//失敗的緣由給了value
self.onRejectedCallbacks.forEach(cb=>cb(self.value));
}
});
}
try{
//由於此函數執行可能會異常，因此須要捕獲，若是出錯了，須要用錯誤 對象reject
executor(resolve,reject);
}catch(e){
//若是這函數執行失敗了，則用失敗的緣由reject這個promise
reject(e);
};
}
function resolvePromise(promise2,x,resolve,reject){
if(promise2 === x){
return reject(new TypeError('循環引用'));
}
let called = false;//promise2是否已經resolve 或reject了
if(x instanceof Promise){
if(x.status == PENDING){
x.then(function(y){
resolvePromise(promise2,y,resolve,reject);
},reject);
}else{
x.then(resolve,reject);
}
//x是一個thenable對象或函數，只要有then方法的對象，
}else if(x!= null &&((typeof x=='object')||(typeof x == 'function'))){
//當咱們的promise和別的promise進行交互，編寫這段代碼的時候儘可能的考慮兼容性，容許別人瞎寫
try{
let then = x.then;
if(typeof then == 'function'){
//有些promise會同時執行成功和失敗的回調
then.call(x,function(y){
//若是promise2已經成功或失敗了，則不會再處理了
if(called)return;
called = true;
resolvePromise(promise2,y,resolve,reject)
},function(err){
if(called)return;
called = true;
reject(err);
});
}else{
//到此的話x不是一個thenable對象，那直接把它當成值resolve promise2就能夠了
resolve(x);
}
}catch(e){
if(called)return;
called = true;
reject(e);
}
}else{
//若是X是一個普通 的值，則用x的值去resolve promise2
resolve(x);
}
}
//onFulfilled 是用來接收promise成功的值或者失敗的緣由
Promise.prototype.then = function(onFulfilled,onRejected){
//若是成功和失敗的回調沒有傳，則表示這個then沒有任何邏輯，只會把值日後拋
//2.2.1
onFulfilled = typeof onFulfilled == 'function'?onFulfilled:function(value){return value};
onRejected = typeof onRejected == 'function'?onRejected:reason=>{throw reason};
//若是當前promise狀態已是成功態了，onFulfilled直接取值
let self = this;
let promise2;
if(self.status == FULFILLED){
return promise2 = new Promise(function(resolve,reject){
setTimeout(function(){
try{
let x =onFulfilled(self.value);
//若是獲取到了返回值x,會走解析promise的過程
resolvePromise(promise2,x,resolve,reject);
}catch(e){
//若是執行成功的回調過程當中出錯了，用錯誤緣由把promise2 reject
reject(e);
}
})
});
}
if(self.status == REJECTED){
return promise2 = new Promise(function(resolve,reject){
setTimeout(function(){
try{
let x =onRejected(self.value);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
})
});
}
if(self.status == PENDING){
return promise2 = new Promise(function(resolve,reject){
self.onResolvedCallbacks.push(function(){
try{
let x =onFulfilled(self.value);
//若是獲取到了返回值x,會走解析promise的過程
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
});
self.onRejectedCallbacks.push(function(){
try{
let x =onRejected(self.value);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
});
});
}
}
複製代碼
具體的代碼細節呢？我在代碼中已經作了標註，若是又不懂的能夠私聊、微信 歡迎來擾。
說在最後
已經有好幾個中午好怎麼睡午覺了，這篇文章寫的有點敷衍。原本下班的時候就8點半了，而後又整理/調試代碼 整了半天，結果在寫文章的時候想例子想個半天都想不出來。我明天會利用休息時間好好來修改一下這篇文章的，太困了 先這樣吧，我洗澡去睡覺了。您若是對如今的這篇文章不太滿意，就請過一天再來看。
最後提一句，能不能給我漲點人氣啊，寫了一年多，仍是這點人氣..
- 1. 把 setState 整明白
- 2. 此次把 javascript 閉包給你講的明明白白
- 3. 讓你明明白白的使用 RecyclerView——SnapHelper 詳解
- 4. Promise 你真的用明白了麼？
- 5. 明明白白AOP
- 6. 30分鐘，讓你完全明白Promise原理
- 7. 10分鐘，讓你完全明白Promise原理
- 8. 阿里技術專家深刻講解，一文把Servlet整的明明白白
- 9. 明明白白學C#
- 10. 讓你明白response.sendRedirect()與request.getRequestDispatcher().forward()區別
- 更多相關文章...
- • Eclipse 窗口說明 - Eclipse 教程
- • PHP EOF(heredoc) 使用說明 - PHP教程
- • Github 簡明教程
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。