promise用了這么多年了，一直也沒有系統整理過，今天整理整理promise的相關東西，感興趣的可以一起看一看，我盡量用更容易理解的語言來剖析一下promise
我準備分兩篇文章來說明一下promise
一篇來理解和使用promise（本篇）另一篇來從promise使用功能的角度來剖析下promise的原始碼（下一篇）

我準備從以下幾點來慢慢理解Promise
1、Promise,Promise存在的意義
2、Promise基本用法
3、.then()函式
4、.catch()函式
5、實作簡單的axios
6、Promise.all, Promise.race 以及兩者的區別
7、Promise.resolve和Promise.reject

1、什么是Promise

我的理解是：實作讓我們用同步的方式去寫異步代碼的一種技術，是異步解決方案的一種，
他可以將多個異步操作進行佇列化，讓它們可以按照我們的想法去順序執行，
那么，Promise之前有沒有其他的異步解決方案，肯定是有的，常見的有callback回呼函式以及事件，
那Promise有啥優勢，我認為Promise功能更為強大，且能讓我們代碼寫的更為清晰

Promise提供了統一的API, 讓我們控制異步操作更加容易
Promise可以避免callback回呼函式的層層嵌套，使代碼更為清晰，可讀性性與維護性更高

2、Promise基本用法

首先，我們先來了解一些Promise的基本概念

2.1、Promise狀態

Promise一共有3中狀態，分別是Pending（進行中）、Resolved（已完成，又稱Fulfilled）和Rejected（已失敗）
狀態的改變只可能從Pending轉------>Resolved,或者從Pending------->Rejected，并且狀態一旦發生改變，就不會再更改了，而觸發狀態發生改變的，只有異步操作的結果，結果為成功觸發狀態變更為 Resolved, 結果失敗或者中途發生錯誤，則會觸發狀態變更為 Rejected

2.2 Promise結構

Promise是一個建構式，故通過new Promise()可以實體化出來一個Promise物件
new Promise()時，接受一個函式作為引數，且這個函式，有兩個引數，分別是resolve,reject，而resolve和 reject也是兩個函式，他們由JavaScript引擎提供，不用自己部署，
每一個被實體化出來的promise實體，都有.then() 和 .catch() 兩個方法，且這兩個方法的呼叫支持鏈式操作

好，了解完概念，我們看看Promise的基本用法
首先，如何實體化一個promise物件

const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		if (/* 成功 */) {
			resolve(res)
		} else {
			reject(err)
		}
	}, 100)
})

上圖中，通過new Promise() 實體化了一個promise實體，注意：new Promise()方法中的函式是一個立即執行函式，即，在new Promise()的一瞬間就會被執行，函式內代碼是同步代碼，
resolve和reject用于回傳異步操作的結果，當使用resolve()時，promise狀態會由Pending—>Resolved, 并將異步的正確結果回傳，當使用reject()時，promise狀態由Pending---->Rejected，并將錯誤資訊回傳

再看這個物件如何接識訓傳的結果

promise.then((res) => {
	console.log(res)
}).catch((err) => {
	console.log(err)
})

上圖中，.then的回呼函式和 .catch的回呼函式分別用來接收resolve()回傳的正確資訊和reject回傳的錯誤資訊，

下面我們來詳細看下.then() 和 .catch()

.then() 函式

then()函式是Promise實體的一個方法，他的作用是為Promise實體添加狀態改變時的回呼函式
它存在以下特點

then()是添加在Promise的原型上的，即Promise.prototype.then(), 故所有Promise實體都存在.then()方法
.then()可以進行鏈式操作即promise.then().then().then()，then的回呼函式將會按照次序呼叫
.then()函式存在兩個引數，這兩個引數一般情況下是函式，其中，第一個函式是在狀態變為Resolved的時候才會執行(我們下文中統稱為.then的resolve回呼)，并且引數是Promise物件resolve(res)時的值，第二個函式是在狀態變為Rejected的時候才會執行(我們下文統稱為.then的reject回呼)，后面我們會說哪幾種情況下，狀態會變成Rejected
Promise會存在值穿透的情況，當我們then()的兩個引數不為函式時，會穿透到下一個then()里面，如果下一個then()引數也不是函式，則會繼續向下穿透
我們上面說過了，Promise實體resolve()方法執行時，會將實體的狀態變更為Resolved，故.then的resolve回呼會在當前Promise實體resolve()時被觸發

下面，我們重點來分析下第2，3，4，5

function getData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (url) {
                resolve({
                    code: 200,
                    message: 'ok',
                    data: 123
                })
            } else {
                reject(new Error('缺少url'))
            }
        }, 100)
    })
}
getData('http://www.baidu.com').then((res) => {
    console.log('第一個回呼')
    console.log(res)
}).then((res) => {
    console.log('第二個回呼')
    console.log(res)
}).then((res) => {
    console.log('第三個回呼')
    console.log(res)
})
// 第一個回呼
// { code: 200, message: 'ok', data: 123 }
// 第二個回呼
// undefined
// 第三個回呼
// undefined

可以看出，首先，當getData() resolve() 執行時 .then的resolve回呼函式被依次呼叫，但是只有第一個then()的resolve回呼函式的引數有值，而其他兩個是undefind，這是為什么呢？我們再來看一個代碼

getData('http://www.baidu.com').then((res) => {
    console.log('第一個回呼')
    console.log(res)
    return Promise.resolve()
}).then((res) => {
    console.log(res)
})
// 第一個回呼
// { code: 200, message: 'ok', data: 123 }
// undefined

看這個代碼我們可以發現，上一個then的resolve回呼當return一個Promise.resolve()時，和我們不return 任何東西時得到的結果是一樣的，那我們是不是可以理解為，每個.then()方法的resolve回呼函式，執行完后默認都會回傳一個Promise.resolve()，沒錯，我告訴你，是的，
至于Promise.resolve()得到的是一個什么，我先告訴你，他得到的是一個resolve狀態的Promise實體，這個后面我們會再講，
此時，我們可以總結出：從第二個.then()開始，呼叫這個.then的resolve回呼函式的-----是上一個.then的resolve回呼所回傳的Promise實體，而.then回呼函式的引數，便是上一個.then的回呼函式所回傳的Promise實體resolve的值，下面我們看一段代碼驗證一下

getData('http://www.baidu.com').then((res) => {
    console.log('第一個回呼')
    console.log(res)
    return new Promise((resolve, reject) => {
        resolve('123')
    })
}).then((res) => {
    console.log(res)
})

// 第一個回呼
// { code: 200, message: 'ok', data: 123 }
// 123

總結：

每一個.then的resolve回呼都會回傳默認回傳一個Resolved狀態的Promise物件
當你收到return了一個新的Promise實體時，會覆寫默認回傳的Promise實體
回傳的Promise實體resolve()的值，會作為下一個.then的resolve回呼的引數回傳

下面我們再來看下，如果then()的引數不是函式，那會怎么樣，下面，我們看一段代碼

var getData = function() {
    return new Promise(function(resolve, reject) {
        resolve(123)
    });
};
getData().
then(345)
.catch(err => {
    console.log('捕捉到一個錯誤')
    console.log(err)
}).then((res) => {
    console.log('我是第二個then')
    console.log(res)
})
// 輸出
我是第二個then
123

如上圖，可以看到，當我們第一個then的resolve回呼不是函式，而是一個數字345時，resolve(123)穿透到第二個then中了，觸發了第二個then的resolve回呼執行，并將resolve的回傳值給了第二個then的resolve回呼，這種現象，叫做值穿透，

var getData = function() {
    return new Promise(function(resolve, reject) {
        reject(new Error(123))
    });
};
getData().
then(345)
.catch(678)
.then((res) => {
    console.log('我是第二個then')
    console.log(res)
}).catch(err => {
    console.log('我是第二個catch')
    console.log(err)
})
// 輸出
我是第二個catch
Error: 123

可以看到，報錯時，同樣發生了值穿透

到此，.then()相關以及 then()的第一個引數就講完了，而第二個引數，我們放到.catch()方法中一起將

.catch() 函式

catch()也是掛載在Promise物件原型下的方法(Promise.prototype)，和then()一樣, 故所有Promise物件也都有catch方法，它的作用是用來指定發生錯誤時的回呼函式，也就是捕獲異步操作所發生的錯誤
它有什么特點呢，我們先總結一下，后來再一一來驗證

.catch()會指定一個引數作為錯誤發生時的回呼，故catch((err) => {})的引數會在Promise狀態變更為Rejected時被觸發，
.then(null, (err) => {})的第二個引數，也是在Promise狀態變更為Rejected時被觸發，故其實.catch()和 .then()的reject回呼函式本質上是一樣的，只是寫法不一樣，但我們一般更傾向于使用.catch()而不使用.then的reject回呼，原因后面會講
代碼拋出錯誤和reject()函式執行都會讓Promise物件的狀態轉變為Rejected，故兩種情況都會觸發catch()的回呼執行或者then()的reject回呼執行，所以，reject()的本質，其實就是拋出一個錯誤
.catch()的回呼函式以及.then的reject回呼一樣，執行時默認都會回傳一個狀態為Resolved的Promise物件（也就是 return Promise.resolve()）
.catch()和.then()一樣，也可以寫多個，也支持鏈式操作，原因就是上面的第三點
拋出的錯誤一旦被catch捕獲，便不會再向外傳播，只有再次向外拋出錯誤，才會繼續被后面的catch所捕獲，故錯誤具有冒泡性質，會一步一步向外傳播，直到被catch捕獲

1、我們先看第一點：

var getData = function() {
    return new Promise(function(resolve, reject) {
        reject(123)
    });
};
getData().then((res) => {
    console.log('成功')
}).catch((err) => {
    console.log('捕捉到錯誤')
    console.log(err)
})

// 捕捉到錯誤
// 123

毫無疑問，reject(123)拋出一個錯誤，catch的回呼捕捉到錯誤，并輸出

2、再看第二點：

var getData = function() {
    return new Promise(function(resolve, reject) {
        reject(123)
    });
};
getData().then((res) => {
    console.log('成功')
}, (err) => {
	console.log('捕捉到一個錯誤')
	console.log(err)
})

// 捕捉到錯誤
// 123

從代碼上也可以看出，上面這兩種方式是一樣的，
現在，我來說說為什么建議使用catch() ,而不推薦使用then()的reject回呼呢，看下下面的代碼

var getData = function() {
    return new Promise(function(resolve, reject) {
        resolve(123)
    });
};
getData().then((res) => {
    console.log('成功')
    return new Promise((resolve, reject) => {
        reject(new Error('123'))
    })
}, (err) => {
	console.log('捕捉到一個錯誤')
	console.log(err)
})

// 成功

此時，只輸出了成功, 而then的resolve回呼中所拋出的錯誤，并沒有被捕捉到
再看下面一段代碼

var getData = function() {
    return new Promise(function(resolve, reject) {
        resolve(123)
    });
};
getData().then((res) => {
    console.log('成功')
    return new Promise((resolve, reject) => {
        reject(new Error('123'))
    })
}).catch((err) => {
	console.log('捕捉到一個錯誤')
	console.log(err)
})

成功
捕捉到一個錯誤
Error: 123

看，同樣的錯誤，但是使用catch()，可以捕捉到，而使用then()的reject回呼，卻捕捉不到，
結論：catch()可以通過放到操作鏈的最底部而捕捉到任意地方（指的是Promise內）的錯誤，而then()的reject回呼，只能捕捉到這個.then()執行之前的錯誤，當前執行的then的resolve回呼內的錯誤無法捕捉到，后面再執行的代碼所拋出的錯誤也無法捕捉到，并且.catch的寫法，代碼層面也更為清晰

var getData = function() {
    return new Promise(function(resolve, reject) {
        resolve(123)
    });
};
getData().then((res) => {
    console.log('成功')
    return new Promise((resolve, reject) => {
        reject(new Error('123'))
    })
}, (err) => {
    console.log('第一個錯誤捕捉')
}).then((res) => {
    console.log('第二個resolve回呼')
}, err => {
    console.log('第二個錯誤捕捉')
})

成功
第二個錯誤捕捉

如上圖中，第一個then的resolve回呼中拋出的錯誤被第二個then中reject回呼所捕捉
故結論：一般情況下，不要去用then的第二個引數，而盡可能的去用.catch()方法去捕捉錯誤

3、下面我們再看第三點

var getData = function() {
    return new Promise(function(resolve, reject) {
        resolve(x)
    });
};
getData().then((res) => {
    console.log('成功')
}).catch(err => {
    console.log('捕捉到一個錯誤')
    console.log(err)
    throw new Error('我拋出了一個錯誤')
}).catch(err => {
    console.log('我也捕捉到了一個錯誤')
    console.log(err)
})

捕捉到一個錯誤
ReferenceError: x is not defined
我也捕捉到了一個錯誤
Error: 我拋出了一個錯誤

上面代碼可以看出，不是只有reject()執行了才會拋出一個錯誤，x未定義，系統會自動拋出一個錯誤，throw new Error是我們自己手動拋出一個錯誤，而這些都會使得Promise物件的狀態變更為Rejected,從而觸發catch，
同時上面的代碼我們還可以看出我們上面寫的第六點，錯誤會冒泡式向外傳播，當被catch之后，便不會再進行傳播了，直到再次拋出錯誤，上面代碼中，第一個錯誤被第一個catch捕獲后，原本第二個catch是不會再走的，但因為在第一個catch中又拋出了一個錯誤，才導致了第二個catch的執行，

4、下面我們再看第四點（catch()的回呼函式也會回傳一個狀態是Resolved的Promise實體）
其實這一點，我們從上面那張圖中也是可以看出來的，第一個catch()的回呼原本是要回傳了一個Resolved狀態的Promise，但是因為throw了一個錯誤，導致這個Promise實體狀態變更為Rejected并回傳，而變成成Rejected變觸發了第二個catch的回呼執行
我們看下下面的代碼，再次驗證下

var getData = function() {
    return new Promise(function(resolve, reject) {
        resolve(x)
    });
};
getData().then((res) => {
    console.log('成功')
}).catch(err => {
    console.log('捕捉到一個錯誤')
    console.log(err)
}).then((res) => {
    console.log('我是第二個then')
})

捕捉到一個錯誤
ReferenceError: x is not defined
我是第二個then

上面代碼可以看出，catch的回呼執行后，后面的then依然被執行了，為什么，就是因為catch的回呼執行后默認回傳了一個Resolved狀態的Promise實體（return Promise.resolve()）

第五點，第六點我們已經驗證過了，不再多說，

實作簡單的axios

axios我們比較常用，大家應該都發現了，axios的使用方式，和Promise好像是一樣的，

axios({
    url:'http://www.baidu.com',
    method: 'post',
    data: {}
}).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

沒錯，axios就是一個Promise實體，他是一個用Promise來封裝的一個XMLHttpRequest
下面我們也來實作一個簡單的axios

function MyAxios(option) {
    return new Promise((resolve, reject) => {
        const http = new XMLHttpRequest()
        http.open(option.method, option.url);
        http.responseType = "json";
        http.setRequestHeader("Accept", "application/json");
        http.onreadystatechange = myHandler;
        http.send();

        function myHandler() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        }
    })
}
MyAxios({
    url:'http://www.baidu.com',
    method: 'post'
}).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

Promise.all, Promise.race 以及兩者的區別

1、Promise.all

Promise.all()可以并行執行多個Promise(), 并回傳一個新的Promise實體

var p = Promise.all([p1, p2, p3]); // p1,p2,p3為3個Promise實體

Promise.all（）的引數不一定是陣列，只要具有Iterator介面的資料都可以（Iterator是一個遍歷器，我這里就不做過多介紹，感興趣的可以自己去官網看看），但是引數遍歷后回傳的成員必須必須是Promise物件（如上面的，p1,p2,p3都必須是Promise物件，如果不是，則會先呼叫Promise.resolve(p1)將他轉化為Promise實體）

那么，Promise.all()回傳的Promise實體的狀態是如何定義的，

只有引數的各個成員(p1,p2,p3)狀態都變成Resolved，p的狀態才會變成Resolved,
引數的各個成員中，有任意一個狀態變成Rejected, p的狀態都會立刻變成Rejected

function getData (data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (data === 6) {
                reject(new Error('請求發生錯誤了'))
            } else {
                resolve(data)
            }
        }, data * 500)
    })
}
const promises = [1,3,5,7].map((item) => {
    return getData(item)
})
Promise.all(promises)
.then((res) => {
    console.log('請求成功')
    console.log(res)
}).catch((err) => {
    console.log('請求失敗')
    console.log(err)
})

// 3.5s后輸出
請求成功
[ 1, 3, 5, 7 ]

如上圖, 最后一個成員(上圖中7回傳的promise實體)的狀態是在3.5s后才變更為Resolved，故.then()的resolve回呼在3.5s后才執行

function getData (data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (data === 6) {
                reject(new Error('請求發生錯誤了'))
            } else {
                resolve(data)
            }
        }, data * 500)
    })
}
const promises = [2,4,6,8].map((item) => {
    return getData(item)
})
Promise.all(promises)
.then((res) => {
    console.log('請求成功')
    console.log(res)
}).catch((err) => {
    console.log('請求失敗')
    console.log(err)
})

// 3s后輸出
請求失敗
Error: 請求發生錯誤了

上圖可以看出，當我們改用 2，4，6，8去得到promise成員時，第3s得時候發生了錯誤，此時，Promise.all()回傳得Promise實體得狀態立刻變更為Rejected，catch()的回呼立即觸發，故輸出錯誤

2、Promise.race()

Promise.race()和Promise.all()的作用是一樣的，都是并發處理多個Promise實體，并回傳一個新的實體，
而區別在于，兩者回傳的新的Promise實體的狀態改變的時機不同，

Promise.all是所有Promise子成員狀態都變為Resolved, 新的Promise實體狀態才會變成Resolved，中途如果有任何一個子成員狀態變成了Rejected，新的Promise實體的狀態就會立刻變為Rejected
Promise.race是只要子成員中，有任何一個的狀態發生了變化(不管是變成Resolved還是Rejected)，那么回傳的新的Promise實體的狀態也會立刻發生變化，而變化的狀態就是那個子成員所變化的狀態，

function getData (data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (data === 6) {
                reject(new Error('請求發生錯誤了'))
            } else {
                resolve(data)
            }
        }, data * 500)
    })
}
const promises = [2,4,6,8].map((item) => {
    return getData(item)
})
Promise.race(promises)
.then((res) => {
    console.log('請求成功')
    console.log(res)
}).catch((err) => {
    console.log('請求失敗')
    console.log(err)
})

// 1s后輸出
請求成功
2

上圖可以看出，1s后第一個子成員狀態變更為Resolved，那么回傳的新Promise實體狀態也立馬變更為Resolved，故1s后.then()的resolve回呼執行，輸出請求成功.

最后，我們來說一說前面用到了的Promise.resolve()吧

Promise.resolve和Promise.reject

Promise.resolve()

前面我們說到過 Promise.resolve可以回傳一個狀態是Resolved的Promise物件，沒錯，其實它等同于

new Promise((resolve, reject) => {
    resolve()
})

當Promise.resolve()有引數時，會回傳一個Promise物件的同時，將引數做作為then()resolve回呼的引數回傳（當引數是thenable物件除外，后面會將），主要有以下幾種情況
1、引數是一個Promise物件時
將會直接回傳這個引數，不做任何更改
2、引數是thenable物件時，（即，存在.then()方法的物件），如下

let obj= {
  then: function(resolve, reject) {
    resolve('我是thenable物件');
  }
};

此時，Promise.resolve(obj) 會回傳一個Promise物件，并且呼叫obj的then()方法，哎，這里注意了，這個.then()并不是新Promise物件的.then() , obj的then()會立即執行，可不代表新的Promise物件的then() 的回呼也會執行，還記得嗎，我們前面說的Promise物件的then()的回呼執行的條件是這個Promise物件的狀態發生變化了才會執行，

let obj= {
    then: function(resolve, reject) {
      console.log(123)
    }
};
  
let p1 = Promise.resolve(obj);
p1.then(function(value) {
    console.log('成功')
    console.log(value);  // 42
});
// 輸出
123

從上圖可以看出來，立即執行了obj.then()，但Promise的then的回呼并沒有被執行

3、引數不是物件，或者說是沒有.then方法的物件
會回傳一個Promise實體，并將引數作為.then()的resolve回呼的引數回傳
如，Promise.resolve(‘123’) 等價于

new Promise((resolve, reject) => {
    resolve('123')
})

4、不帶引數，即Promise.resolve()，也就是我們前面說的，回傳了一個Resolved狀態的Promise物件，但是.then()的resolve回呼沒有引數，

new Promise((resolve, reject) => {
    resolve()
}).then((res) => {
	console.log(res)
})
// 輸出
undefined

Promise.resolve()

Promise.reject() 也是回傳一個Promise物件，只是這個物件的狀態是Rejected
至于引數的用法和Promise.resolve()完全一樣，唯一的區別是沒有thenable引數一說，也就是說有引數時，引數不論哪種情況，都會被當做catch()的回呼引數回傳，也就是說引數沒有前面1，2，3種的區別，大家可以去試試，我就不過多說明了，

Promise的使用就說到這里了，下一次給大家帶來從功能的角度來看Promise的原始碼敬請期待，喜歡的話，點個贊吧！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225871.html

標籤：其他

上一篇：jQuery入門基礎

下一篇：魔幻離現實僅一步之遙：細說Python的回圈呼叫、回圈參考和回圈匯入

ES6 之 Promise用法詳解

1、什么是Promise

2、Promise基本用法

2.1、Promise狀態

2.2 Promise結構

.then() 函式

.catch() 函式

實作簡單的axios

Promise.all, Promise.race 以及兩者的區別

1、Promise.all

2、Promise.race()

Promise.resolve和Promise.reject

Promise.resolve()

Promise.resolve()