前言

promise用了這么多年了，一直也沒有系統(tǒng)整理過。今天整理整理promise的相關東西，感興趣的可以一起看一看。我盡量用更容易理解的語言來剖析一下promise

我準備分兩篇文章來說明一下promise

一篇來理解和使用promise（本篇） 另一篇來從promise使用功能的角度來剖析下promise的源碼（下一篇）

1、什么是Promise

我的理解是：實現(xiàn)讓我們用同步的方式去寫異步代碼的一種技術。是異步解決方案的一種。

他可以將多個異步操作進行隊列化，讓它們可以按照我們的想法去順序執(zhí)行。

那么，Promise之前有沒有其他的異步解決方案?？隙ㄊ怯械模Ｒ姷挠衏allback回調(diào)函數(shù)以及事件。

那Promise有啥優(yōu)勢，我認為Promise功能更為強大，且能讓我們代碼寫的更為清晰

• Promise提供了統(tǒng)一的API, 讓我們控制異步操作更加容易
• Promise可以避免callback回調(diào)函數(shù)的層層嵌套，使代碼更為清晰?？勺x性性與維護性更高
  

2、Promise基本用法

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

2.1、Promise狀態(tài)

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

2.2 Promise結構

Promise是一個構造函數(shù)，故通過new Promise()可以實例化出來一個Promise對象

new Promise()時，接受一個函數(shù)作為參數(shù)，且這個函數(shù)，有兩個參數(shù)，分別是resolve,reject。 而resolve和 reject也是兩個函數(shù)。他們由JavaScript引擎提供，不用自己部署。

每一個被實例化出來的promise實例，都有.then() 和 .catch() 兩個方法。且這兩個方法的調(diào)用支持鏈式操作

好，了解完概念，我們看看Promise的基本用法

首先，如何實例化一個promise對象

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

上圖中，通過new Promise() 實例化了一個promise實例，注意：new Promise()方法中的函數(shù)是一個立即執(zhí)行函數(shù)，即，在new Promise()的一瞬間就會被執(zhí)行。函數(shù)內(nèi)代碼是同步代碼。

resolve和reject用于返回異步操作的結果，當使用resolve()時，promise狀態(tài)會由Pending—>Resolved, 并將異步的正確結果返回。當使用reject()時，promise狀態(tài)由Pending---->Rejected，并將錯誤信息返回

再看這個對象如何接收返回的結果

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

上圖中，.then的回調(diào)函數(shù) 和 .catch的回調(diào)函數(shù)分別用來接收resolve()返回的正確信息和reject返回的錯誤信息。

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

.then() 函數(shù)

then()函數(shù)是Promise實例的一個方法，他的作用是為Promise實例添加狀態(tài)改變時的回調(diào)函數(shù)
它存在以下特點

1. then()是添加在Promise的原型上的。即Promise.prototype.then(), 故所有Promise實例都存在.then()方法
2. .then()可以進行鏈式操作 即promise.then().then().then()，then的回調(diào)函數(shù)將會按照次序調(diào)用
3. .then()函數(shù)存在兩個參數(shù)，這兩個參數(shù)一般情況下是函數(shù)。其中，第一個函數(shù)是在狀態(tài)變?yōu)镽esolved的時候才會執(zhí)行(我們下文中統(tǒng)稱為.then的resolve回調(diào))，并且參數(shù)是Promise對象resolve(res)時的值。第二個函數(shù)是在狀態(tài)變?yōu)镽ejected的時候才會執(zhí)行(我們下文統(tǒng)稱為.then的reject回調(diào))，后面我們會說哪幾種情況下，狀態(tài)會變成Rejected
4. Promise會存在值穿透的情況，當我們then()的兩個參數(shù)不為函數(shù)時，會穿透到下一個then()里面，如果下一個then()參數(shù)也不是函數(shù)，則會繼續(xù)向下穿透
5. 我們上面說過了，Promise實例resolve()方法執(zhí)行時，會將實例的狀態(tài)變更為Resolved，故.then的resolve回調(diào)會在當前Promise實例resolve()時被觸發(fā)
   

下面，我們重點來分析下第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('第一個回調(diào)')
 console.log(res)
}).then((res) => {
 console.log('第二個回調(diào)')
 console.log(res)
}).then((res) => {
 console.log('第三個回調(diào)')
 console.log(res)
})
// 第一個回調(diào)
// { code: 200, message: 'ok', data: 123 }
// 第二個回調(diào)
// undefined
// 第三個回調(diào)
// undefined

可以看出，首先，當getData() resolve() 執(zhí)行時 .then的resolve回調(diào)函數(shù)被依次調(diào)用，但是只有第一個then()的resolve回調(diào)函數(shù)的參數(shù)有值，而其他兩個是undefind，這是為什么呢？我們再來看一個代碼

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

看這個代碼我們可以發(fā)現(xiàn)，上一個then的resolve回調(diào)當return一個Promise.resolve()時，和我們不return 任何東西時得到的結果是一樣的。那我們是不是可以理解為，每個.then()方法的resolve回調(diào)函數(shù)，執(zhí)行完后默認都會返回一個Promise.resolve()。沒錯，我告訴你，是的。

至于Promise.resolve()得到的是一個什么，我先告訴你，他得到的是一個resolve狀態(tài)的Promise實例。這個后面我們會再講。

此時，我們可以總結出：從第二個.then()開始，調(diào)用這個.then的resolve回調(diào)函數(shù)的-----是上一個.then的resolve回調(diào)所返回的Promise實例。而.then回調(diào)函數(shù)的參數(shù)，便是上一個.then的回調(diào)函數(shù)所返回的Promise實例resolve的值。下面我們看一段代碼驗證一下

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

// 第一個回調(diào)
// { code: 200, message: 'ok', data: 123 }
// 123

總結：

1. 每一個.then的resolve回調(diào)都會返回默認返回一個Resolved狀態(tài)的Promise對象
2. 當你收到return了一個新的Promise實例時，會覆蓋默認返回的Promise實例
3. 返回的Promise實例resolve()的值，會作為下一個.then的resolve回調(diào)的參數(shù)返回
   

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

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回調(diào)不是函數(shù)，而是一個數(shù)字345時，resolve(123)穿透到第二個then中了，觸發(fā)了第二個then的resolve回調(diào)執(zhí)行，并將resolve的返回值給了第二個then的resolve回調(diào)。這種現(xiàn)象，叫做值穿透。

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

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

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

.catch() 函數(shù)

catch()也是掛載在Promise對象原型下的方法(Promise.prototype)，和then()一樣, 故所有Promise對象也都有catch方法。它的作用是用來指定發(fā)生錯誤時的回調(diào)函數(shù)，也就是捕獲異步操作所發(fā)生的錯誤
它有什么特點呢。我們先總結一下，后來再一一來驗證

1. .catch()會指定一個參數(shù)作為錯誤發(fā)生時的回調(diào)，故catch((err) => {})的參數(shù)會在Promise狀態(tài)變更為Rejected時被觸發(fā)。
2. .then(null, (err) => {})的第二個參數(shù)，也是在Promise狀態(tài)變更為Rejected時被觸發(fā)。故其實.catch()和 .then()的reject回調(diào)函數(shù)本質(zhì)上是一樣的，只是寫法不一樣。但我們一般更傾向于使用.catch()而不使用.then的reject回調(diào)。原因后面會講
3. 代碼拋出錯誤和reject()函數(shù)執(zhí)行都會讓Promise對象的狀態(tài)轉變?yōu)镽ejected，故兩種情況都會觸發(fā)catch()的回調(diào)執(zhí)行或者then()的reject回調(diào)執(zhí)行。 所以，reject()的本質(zhì)，其實就是拋出一個錯誤
4. .catch()的回調(diào)函數(shù)以及.then的reject回調(diào)一樣，執(zhí)行時默認都會返回一個狀態(tài)為Resolved的Promise對象（也就是 return Promise.resolve()）
5. .catch()和.then()一樣，也可以寫多個，也支持鏈式操作，原因就是上面的第三點
6. 拋出的錯誤一旦被catch捕獲，便不會再向外傳播，只有再次向外拋出錯誤，才會繼續(xù)被后面的catch所捕獲。故錯誤具有冒泡性質(zhì)，會一步一步向外傳播，直到被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的回調(diào)捕捉到錯誤，并輸出

2、再看第二點：

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

// 捕捉到錯誤
// 123

從代碼上也可以看出，上面這兩種方式是一樣的。

現(xiàn)在，我來說說為什么建議使用catch() ,而不推薦使用then()的reject回調(diào)呢。看下下面的代碼

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回調(diào)中所拋出的錯誤，并沒有被捕捉到

再看下面一段代碼

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回調(diào)，卻捕捉不到。

結論：catch()可以通過放到操作鏈的最底部而捕捉到任意地方（指的是Promise內(nèi)）的錯誤。而then()的reject回調(diào)，只能捕捉到這個.then()執(zhí)行之前的錯誤，當前執(zhí)行的then的resolve回調(diào)內(nèi)的錯誤無法捕捉到，后面再執(zhí)行的代碼所拋出的錯誤也無法捕捉到。并且.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回調(diào)')
}, err => {
 console.log('第二個錯誤捕捉')
})

成功
第二個錯誤捕捉

如上圖中，第一個then的resolve回調(diào)中拋出的錯誤被第二個then中reject回調(diào)所捕捉

故 結論：一般情況下，不要去用then的第二個參數(shù)，而盡可能的去用.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()執(zhí)行了才會拋出一個錯誤，x未定義，系統(tǒng)會自動拋出一個錯誤，throw new Error是我們自己手動拋出一個錯誤。而這些都會使得Promise對象的狀態(tài)變更為Rejected,從而觸發(fā)catch。
同時上面的代碼我們還可以看出我們上面寫的第六點，錯誤會冒泡式向外傳播，當被catch之后，便不會再進行傳播了。直到再次拋出錯誤。上面代碼中，第一個錯誤被第一個catch捕獲后，原本第二個catch是不會再走的，但因為在第一個catch中又拋出了一個錯誤，才導致了第二個catch的執(zhí)行。

4、下面我們再看第四點（catch()的回調(diào)函數(shù)也會返回一個狀態(tài)是Resolved的Promise實例）
其實這一點，我們從上面那張圖中也是可以看出來的，第一個catch()的回調(diào)原本是要返回了一個Resolved狀態(tài)的Promise，但是因為throw了一個錯誤，導致這個Promise實例狀態(tài)變更為Rejected并返回，而變成成Rejected變觸發(fā)了第二個catch的回調(diào)執(zhí)行

我們看下下面的代碼，再次驗證下

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的回調(diào)執(zhí)行后，后面的then依然被執(zhí)行了，為什么，就是因為catch的回調(diào)執(zhí)行后默認返回了一個Resolved狀態(tài)的Promise實例（return Promise.resolve()）

第五點，第六點我們已經(jīng)驗證過了。不再多說。

實現(xiàn)簡單的axios

axios我們比較常用，大家應該都發(fā)現(xiàn)了，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
下面我們也來實現(xiàn)一個簡單的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 以及兩者的區(qū)別

1、Promise.all

Promise.all()可以并行執(zhí)行多個Promise(), 并返回一個新的Promise實例

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

Promise.all（）的參數(shù)不一定是數(shù)組，只要具有Iterator接口的數(shù)據(jù)都可以（Iterator是一個遍歷器，我這里就不做過多介紹，感興趣的可以自己去官網(wǎng)看看）。但是參數(shù)遍歷后返回的成員必須必須是Promise對象（如上面的，p1,p2,p3都必須是Promise對象，如果不是，則會先調(diào)用Promise.resolve(p1)將他轉化為Promise實例）

那么，Promise.all()返回的Promise實例的狀態(tài)是如何定義的。

• 只有參數(shù)的各個成員(p1,p2,p3)狀態(tài)都變成Resolved，p的狀態(tài)才會變成Resolved,
• 參數(shù)的各個成員中，有任意一個狀態(tài)變成Rejected, p的狀態(tài)都會立刻變成Rejected
  

function getData (data) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   if (data === 6) {
    reject(new Error('請求發(fā)生錯誤了'))
   } 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實例)的狀態(tài)是在3.5s后才變更為Resolved，故.then()的resolve回調(diào)在3.5s后才執(zhí)行

function getData (data) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   if (data === 6) {
    reject(new Error('請求發(fā)生錯誤了'))
   } 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: 請求發(fā)生錯誤了

上圖可以看出，當我們改用 2，4，6，8去得到promise成員時，第3s得時候 發(fā)生了錯誤，此時，Promise.all()返回得Promise實例得狀態(tài)立刻變更為Rejected，catch()的回調(diào)立即觸發(fā)。故輸出錯誤

2、Promise.race()

Promise.race()和Promise.all()的作用是一樣的，都是并發(fā)處理多個Promise實例，并返回一個新的實例。
而區(qū)別在于，兩者返回的新的Promise實例的狀態(tài)改變的時機不同。

Promise.all是 所有Promise子成員狀態(tài)都變?yōu)镽esolved, 新的Promise實例狀態(tài)才會變成Resolved。中途如果有任何一個子成員狀態(tài)變成了Rejected，新的Promise實例的狀態(tài)就會立刻變?yōu)镽ejected

Promise.race是 只要子成員中，有任何一個的狀態(tài)發(fā)生了變化(不管是變成Resolved還是Rejected)，那么返回的新的Promise實例的狀態(tài)也會立刻發(fā)生變化，而變化的狀態(tài)就是那個子成員所變化的狀態(tài)。

function getData (data) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   if (data === 6) {
    reject(new Error('請求發(fā)生錯誤了'))
   } 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后 第一個子成員狀態(tài)變更為Resolved，那么返回的新Promise實例狀態(tài)也立馬變更為Resolved，故1s后.then()的resolve回調(diào)執(zhí)行。輸出請求成功.

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

Promise.resolve和Promise.reject

Promise.resolve()

前面我們說到過 Promise.resolve可以返回一個狀態(tài)是Resolved的Promise對象。沒錯，其實它等同于

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

當Promise.resolve()有參數(shù)時，會返回一個Promise對象的同時，將參數(shù)做作為then()resolve回調(diào)的參數(shù)返回（當參數(shù)是thenable對象除外，后面會將）。主要有以下幾種情況

1、參數(shù)是一個Promise對象時

將會直接返回這個參數(shù)，不做任何更改

2、參數(shù)是thenable對象時，（即，存在.then()方法的對象），如下

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

此時，Promise.resolve(obj) 會返回一個Promise對象，并且調(diào)用obj的then()方法，哎，這里注意了，這個.then()并不是 新Promise對象的.then() , obj的then()會立即執(zhí)行，可不代表 新的Promise對象的then() 的回調(diào)也會執(zhí)行， 還記得嗎，我們前面說的Promise對象的then()的回調(diào)執(zhí)行的條件是這個Promise對象的狀態(tài)發(fā)生變化了才會執(zhí)行。

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

從上圖可以看出來，立即執(zhí)行了obj.then()，但Promise的then的回調(diào)并沒有被執(zhí)行

3、參數(shù)不是對象，或者說是沒有.then方法的對象

會返回一個Promise實例，并將參數(shù)作為.then()的resolve回調(diào)的參數(shù)返回

如，Promise.resolve(‘123') 等價于

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

4、不帶參數(shù)，即Promise.resolve()，也就是我們前面說的。

返回了一個Resolved狀態(tài)的Promise對象，但是.then()的resolve回調(diào)沒有參數(shù)。

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

Promise.resolve()

Promise.reject() 也是返回一個Promise對象，只是這個對象的狀態(tài)是Rejected
至于參數(shù)的用法和Promise.resolve()完全一樣，唯一的區(qū)別是沒有thenable參數(shù)一說，也就是說有參數(shù)時，參數(shù)不論哪種情況，都會被當做catch()的回調(diào)參數(shù)返回。也就是說參數(shù)沒有前面1，2，3種的區(qū)別。大家可以去試試，我就不過多說明了。

總結

到此這篇關于ES6學習教程之Promise用法詳解的文章就介紹到這了,更多相關ES6之Promise用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論