欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6學(xué)習(xí)教程之Promise用法詳解

 更新時間:2020年11月22日 12:51:34   作者:ら淡然如雪  
這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之Promise用法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

我準(zhǔn)備分兩篇文章來說明一下promise

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

1、什么是Promise

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

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

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

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

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

2、Promise基本用法

首先,我們先來了解一些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ā)生改變,就不會再更改了。而觸發(fā)狀態(tài)發(fā)生改變的,只有異步操作的結(jié)果。結(jié)果為成功 觸發(fā)狀態(tài)變更為 Resolved, 結(jié)果失敗或者中途發(fā)生錯誤,則會觸發(fā)狀態(tài)變更為 Rejected

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

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

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

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

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

首先,如何實(shí)例化一個promise對象

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

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

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

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

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

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

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

.then() 函數(shù)

then()函數(shù)是Promise實(shí)例的一個方法,他的作用是為Promise實(shí)例添加狀態(tài)改變時的回調(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ù)將會按照次序調(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會存在值穿透的情況,當(dāng)我們then()的兩個參數(shù)不為函數(shù)時,會穿透到下一個then()里面,如果下一個then()參數(shù)也不是函數(shù),則會繼續(xù)向下穿透
  5. 我們上面說過了,Promise實(shí)例resolve()方法執(zhí)行時,會將實(shí)例的狀態(tài)變更為Resolved,故.then的resolve回調(diào)會在當(dāng)前Promise實(shí)例resolve()時被觸發(fā)

下面,我們重點(diǎn)來分析下第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

可以看出,首先,當(dāng)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)當(dāng)return一個Promise.resolve()時,和我們不return 任何東西時得到的結(jié)果是一樣的。那我們是不是可以理解為,每個.then()方法的resolve回調(diào)函數(shù),執(zhí)行完后默認(rèn)都會返回一個Promise.resolve()。沒錯,我告訴你,是的。

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

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

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

總結(jié):

  1. 每一個.then的resolve回調(diào)都會返回默認(rèn)返回一個Resolved狀態(tài)的Promise對象
  2. 當(dāng)你收到return了一個新的Promise實(shí)例時,會覆蓋默認(rèn)返回的Promise實(shí)例
  3. 返回的Promise實(shí)例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

如上圖,可以看到,當(dāng)我們第一個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

可以看到,報(bào)錯時,同樣發(fā)生了值穿透

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

.catch() 函數(shù)

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

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

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

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、再看第二點(diǎn):

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)呢??聪孪旅娴拇a

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),卻捕捉不到。

結(jié)論:catch()可以通過放到操作鏈的最底部而捕捉到任意地方(指的是Promise內(nèi))的錯誤。而then()的reject回調(diào),只能捕捉到這個.then()執(zhí)行之前的錯誤,當(dāng)前執(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)所捕捉

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

3、下面我們再看第三點(diǎn)

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。
同時上面的代碼我們還可以看出我們上面寫的第六點(diǎn),錯誤會冒泡式向外傳播,當(dāng)被catch之后,便不會再進(jìn)行傳播了。直到再次拋出錯誤。上面代碼中,第一個錯誤被第一個catch捕獲后,原本第二個catch是不會再走的,但因?yàn)樵诘谝粋€catch中又拋出了一個錯誤,才導(dǎo)致了第二個catch的執(zhí)行。

4、下面我們再看第四點(diǎn)(catch()的回調(diào)函數(shù)也會返回一個狀態(tài)是Resolved的Promise實(shí)例)
其實(shí)這一點(diǎn),我們從上面那張圖中也是可以看出來的,第一個catch()的回調(diào)原本是要返回了一個Resolved狀態(tài)的Promise,但是因?yàn)閠hrow了一個錯誤,導(dǎo)致這個Promise實(shí)例狀態(tài)變更為Rejected并返回,而變成成Rejected變觸發(fā)了第二個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('捕捉到一個錯誤')
 console.log(err)
}).then((res) => {
 console.log('我是第二個then')
})

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

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

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

實(shí)現(xià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)
})

沒錯。axios就是一個Promise實(shí)例。他是一個用Promise來封裝的一個XMLHttpRequest
下面我們也來實(shí)現(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實(shí)例

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

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

那么,Promise.all()返回的Promise實(shí)例的狀態(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實(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('請求發(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ā)生錯誤了

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

2、Promise.race()

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

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

Promise.race是 只要子成員中,有任何一個的狀態(tài)發(fā)生了變化(不管是變成Resolved還是Rejected),那么返回的新的Promise實(shí)例的狀態(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實(shí)例狀態(tài)也立馬變更為Resolved,故1s后.then()的resolve回調(diào)執(zhí)行。輸出請求成功.

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

Promise.resolve和Promise.reject

Promise.resolve()

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

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

當(dāng)Promise.resolve()有參數(shù)時,會返回一個Promise對象的同時,將參數(shù)做作為then()resolve回調(diào)的參數(shù)返回(當(dāng)參數(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í)例,并將參數(shù)作為.then()的resolve回調(diào)的參數(shù)返回

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

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ù)不論哪種情況,都會被當(dāng)做catch()的回調(diào)參數(shù)返回。也就是說參數(shù)沒有前面1,2,3種的區(qū)別。大家可以去試試,我就不過多說明了。

總結(jié)

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

相關(guān)文章

最新評論