前言

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

我準(zhǔn)備分兩篇文章來(lái)說(shuō)明一下promise

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

1、什么是Promise

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

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

那么，Promise之前有沒(méi)有其他的異步解決方案?？隙ㄊ怯械?，常見(jiàn)的有callback回調(diào)函數(shù)以及事件。

那Promise有啥優(yōu)勢(shì)，我認(rèn)為Promise功能更為強(qiáng)大，且能讓我們代碼寫的更為清晰

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

2、Promise基本用法

首先，我們先來(lái)了解一些Promise的基本概念

2.1、Promise狀態(tài)

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

2.2 Promise結(jié)構(gòu)

Promise是一個(gè)構(gòu)造函數(shù)，故通過(guò)new Promise()可以實(shí)例化出來(lái)一個(gè)Promise對(duì)象

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

每一個(gè)被實(shí)例化出來(lái)的promise實(shí)例，都有.then() 和 .catch() 兩個(gè)方法。且這兩個(gè)方法的調(diào)用支持鏈?zhǔn)讲僮?/p>

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

首先，如何實(shí)例化一個(gè)promise對(duì)象

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

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

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

再看這個(gè)對(duì)象如何接收返回的結(jié)果

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

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

下面我們來(lái)詳細(xì)看下.then() 和 .catch()

.then() 函數(shù)

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

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

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

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

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

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

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

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

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

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

總結(jié)：

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

下面我們?cè)賮?lái)看下，如果then()的參數(shù)不是函數(shù)，那會(huì)怎么樣，下面，我們看一段代碼

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

如上圖，可以看到，當(dāng)我們第一個(gè)then的resolve回調(diào)不是函數(shù)，而是一個(gè)數(shù)字345時(shí)，resolve(123)穿透到第二個(gè)then中了，觸發(fā)了第二個(gè)then的resolve回調(diào)執(zhí)行，并將resolve的返回值給了第二個(gè)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('我是第二個(gè)then')
 console.log(res)
}).catch(err => {
 console.log('我是第二個(gè)catch')
 console.log(err)
})
// 輸出
我是第二個(gè)catch
Error: 123

可以看到，報(bào)錯(cuò)時(shí)，同樣發(fā)生了值穿透

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

.catch() 函數(shù)

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

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

1、我們先看第一點(diǎn)：

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

// 捕捉到錯(cuò)誤
// 123

毫無(wú)疑問(wèn)，reject(123)拋出一個(gè)錯(cuò)誤，catch的回調(diào)捕捉到錯(cuò)誤，并輸出

2、再看第二點(diǎn)：

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

// 捕捉到錯(cuò)誤
// 123

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

現(xiàn)在，我來(lái)說(shuō)說(shuō)為什么建議使用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('捕捉到一個(gè)錯(cuò)誤')
	console.log(err)
})

// 成功

此時(shí)，只輸出了成功, 而then的resolve回調(diào)中所拋出的錯(cuò)誤，并沒(méi)有被捕捉到

再看下面一段代碼

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('捕捉到一個(gè)錯(cuò)誤')
	console.log(err)
})

成功
捕捉到一個(gè)錯(cuò)誤
Error: 123

看，同樣的錯(cuò)誤，但是使用catch()，可以捕捉到，而使用then()的reject回調(diào)，卻捕捉不到。

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

成功
第二個(gè)錯(cuò)誤捕捉

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

故 結(jié)論：一般情況下，不要去用then的第二個(gè)參數(shù)，而盡可能的去用.catch()方法去捕捉錯(cuò)誤

3、下面我們?cè)倏吹谌c(diǎn)

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

捕捉到一個(gè)錯(cuò)誤
ReferenceError: x is not defined
我也捕捉到了一個(gè)錯(cuò)誤
Error: 我拋出了一個(gè)錯(cuò)誤

上面代碼可以看出，不是只有reject()執(zhí)行了才會(huì)拋出一個(gè)錯(cuò)誤，x未定義，系統(tǒng)會(huì)自動(dòng)拋出一個(gè)錯(cuò)誤，throw new Error是我們自己手動(dòng)拋出一個(gè)錯(cuò)誤。而這些都會(huì)使得Promise對(duì)象的狀態(tài)變更為Rejected,從而觸發(fā)catch。
同時(shí)上面的代碼我們還可以看出我們上面寫的第六點(diǎn)，錯(cuò)誤會(huì)冒泡式向外傳播，當(dāng)被catch之后，便不會(huì)再進(jìn)行傳播了。直到再次拋出錯(cuò)誤。上面代碼中，第一個(gè)錯(cuò)誤被第一個(gè)catch捕獲后，原本第二個(gè)catch是不會(huì)再走的，但因?yàn)樵诘谝粋€(gè)catch中又拋出了一個(gè)錯(cuò)誤，才導(dǎo)致了第二個(gè)catch的執(zhí)行。

4、下面我們?cè)倏吹谒狞c(diǎn)（catch()的回調(diào)函數(shù)也會(huì)返回一個(gè)狀態(tài)是Resolved的Promise實(shí)例）
其實(shí)這一點(diǎn)，我們從上面那張圖中也是可以看出來(lái)的，第一個(gè)catch()的回調(diào)原本是要返回了一個(gè)Resolved狀態(tài)的Promise，但是因?yàn)閠hrow了一個(gè)錯(cuò)誤，導(dǎo)致這個(gè)Promise實(shí)例狀態(tài)變更為Rejected并返回，而變成成Rejected變觸發(fā)了第二個(gè)catch的回調(diào)執(zhí)行

我們看下下面的代碼，再次驗(yàn)證下

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

捕捉到一個(gè)錯(cuò)誤
ReferenceError: x is not defined
我是第二個(gè)then

上面代碼可以看出，catch的回調(diào)執(zhí)行后，后面的then依然被執(zhí)行了，為什么，就是因?yàn)閏atch的回調(diào)執(zhí)行后默認(rèn)返回了一個(gè)Resolved狀態(tài)的Promise實(shí)例（return Promise.resolve()）

第五點(diǎn)，第六點(diǎn)我們已經(jīng)驗(yàn)證過(guò)了。不再多說(shuō)。

實(shí)現(xiàn)簡(jiǎn)單的axios

axios我們比較常用，大家應(yīng)該都發(fā)現(xiàn)了，axios的使用方式，和Promise好像是一樣的，

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

沒(méi)錯(cuò)。axios就是一個(gè)Promise實(shí)例。他是一個(gè)用Promise來(lái)封裝的一個(gè)XMLHttpRequest
下面我們也來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎ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í)行多個(gè)Promise(), 并返回一個(gè)新的Promise實(shí)例

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

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

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

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

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

// 3.5s后輸出
請(qǐng)求成功
[ 1, 3, 5, 7 ]

如上圖, 最后一個(gè)成員(上圖中7返回的promise實(shí)例)的狀態(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('請(qǐng)求發(fā)生錯(cuò)誤了'))
   } else {
    resolve(data)
   }
  }, data * 500)
 })
}
const promises = [2,4,6,8].map((item) => {
 return getData(item)
})
Promise.all(promises)
.then((res) => {
 console.log('請(qǐng)求成功')
 console.log(res)
}).catch((err) => {
 console.log('請(qǐng)求失敗')
 console.log(err)
})

// 3s后輸出
請(qǐng)求失敗
Error: 請(qǐng)求發(fā)生錯(cuò)誤了

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

2、Promise.race()

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

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

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

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

// 1s后輸出
請(qǐng)求成功
2

上圖可以看出，1s后 第一個(gè)子成員狀態(tài)變更為Resolved，那么返回的新Promise實(shí)例狀態(tài)也立馬變更為Resolved，故1s后.then()的resolve回調(diào)執(zhí)行。輸出請(qǐng)求成功.

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

Promise.resolve和Promise.reject

Promise.resolve()

前面我們說(shuō)到過(guò) Promise.resolve可以返回一個(gè)狀態(tài)是Resolved的Promise對(duì)象。沒(méi)錯(cuò)，其實(shí)它等同于

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

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

1、參數(shù)是一個(gè)Promise對(duì)象時(shí)

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

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

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

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

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

3、參數(shù)不是對(duì)象，或者說(shuō)是沒(méi)有.then方法的對(duì)象

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

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

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

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

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

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

Promise.resolve()

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

總結(jié)

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

最新評(píng)論