React之關(guān)于Promise的用法
1.Promise是什么?
從用途上來說:
(1)promise主要用于異步計(jì)算。
(2)可以將異步操作隊(duì)列化,按照期望的順序執(zhí)行,返回符合預(yù)期的結(jié)果。
(3)可以在對(duì)象之間傳遞和操作promise,幫助我們處理隊(duì)列。
從語法上說:
(1)Promise 是一個(gè)對(duì)象,從它可以獲取異步操作的消息。
(2)Promise 提供統(tǒng)一的 API,各種異步操作都可以用同樣的方法進(jìn)行處理
2.Promise對(duì)象的特點(diǎn)?
對(duì)象的狀態(tài)不受外界影響。
Promise對(duì)象代表一個(gè)異步操作,有三種狀態(tài):
- pending(進(jìn)行中)
- fulfilled(已成功)
- rejected(已失敗)
只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無法改變這個(gè)狀態(tài)。
一旦狀態(tài)改變,就不會(huì)再變,任何時(shí)候都可以得到這個(gè)結(jié)果。
Promise對(duì)象的狀態(tài)變化只有如下2種:
- pending->fulfilled
- pending->rejected
只要這兩種情況發(fā)生,狀態(tài)就凝固,不會(huì)再變,會(huì)一直保持這個(gè)結(jié)果。
說明:如果改變已經(jīng)發(fā)生了,你再對(duì)Promise對(duì)象添加回調(diào)函數(shù),也會(huì)立即得到這個(gè)結(jié)果。這與事件(Event)完全不同,事件的特點(diǎn)是,如果你錯(cuò)過了它,再去監(jiān)聽,是得不到結(jié)果的。
3.Promise的缺點(diǎn)?
無法取消Promise,一旦新建它就會(huì)立即執(zhí)行,無法中途取消。如果不設(shè)置回調(diào)函數(shù),Promise內(nèi)部拋出的錯(cuò)誤,不會(huì)反應(yīng)到外部。當(dāng)處于pending狀態(tài)時(shí),無法得知目前進(jìn)展到哪一個(gè)階段(剛剛開始還是即將完成)
4.Promise的基本用法?
ES6 規(guī)定,Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來生成Promise實(shí)例。
const promise = new Promise(function(resolve, reject) { // ... some code if (/* 異步操作成功 */){ resolve(value); // 異步操作成功時(shí)調(diào)用,并將異步操作的結(jié)果作為參數(shù)傳遞出去 } else { reject(error); // 異步操作失敗時(shí)調(diào)用,并將異步操作的結(jié)果作為參數(shù)傳遞出去 } }); 對(duì)promise對(duì)象穿出的值進(jìn)行處理 promise.then(function(value) { // 這兩個(gè)函數(shù)都接受Promise對(duì)象傳出的值作為參數(shù)。 // success // 成功時(shí),調(diào)用第一個(gè)函數(shù) }, function(error) { // failure // 失敗時(shí),調(diào)用第二個(gè)函數(shù) }); 或者 promise.then(function(value) { // success // 成功時(shí),調(diào)用第一個(gè)函數(shù) }).catch(function(error) { // failure // 失敗時(shí),調(diào)用第二個(gè)函數(shù) }); 說明: (1) promise構(gòu)造函數(shù),接受一個(gè)函數(shù)作為參數(shù)。 (2) 這個(gè)函數(shù)又有兩個(gè)參數(shù),接受 resolve 和 reject 這兩個(gè)參數(shù)。 (3) resolve 和 reject 也是函數(shù) resolve 函數(shù)的作用: 將Promise對(duì)象的狀態(tài)從pending 變?yōu)?resolved, 在異步操作成功時(shí)調(diào)用,并將異步操作的結(jié)果,作為參數(shù)傳遞出去。!!! reject 函數(shù)的作用: 將Promise對(duì)象的狀態(tài)從“從 pending 變?yōu)?rejected, 在異步操作失敗時(shí)調(diào)用,并將異步操作報(bào)出的錯(cuò)誤,作為參數(shù)傳遞出去。!!!
5.Promise 新建后就會(huì)立即執(zhí)行?
componentDidMount() { let p = new Promise((resolve,reject) => { console.log('1') resolve(); }) p.then(result => { console.log('2') }) console.log('3') } // 執(zhí)行結(jié)果: // 1 // 3 // 2 說明: 上面代碼中,Promise 新建后立即執(zhí)行,所以首先輸出的是 1 。 然后,then方法指定的回調(diào)函數(shù),將在當(dāng)前腳本所有同步任務(wù)執(zhí)行完才會(huì)執(zhí)行,所以 2 最后輸出。
例子code
componentDidMount() { new Promise(function (resolve, reject) { console.log('start new Promise...'); var timeOut = Math.random() * 2; console.log('set timeout to: ' + timeOut + ' seconds.'); setTimeout(function () { if (timeOut < 1) { console.log('call resolve()...'); resolve('200 OK'); } else { console.log('call reject()...'); reject('timeout in ' + timeOut + ' seconds.'); } }, timeOut * 1000); }).then(function (result) { //這里的參數(shù)result就是resolve方法通過參數(shù)傳出的內(nèi)容 console.log('Done: ' + result); },function (result) { //這里的參數(shù)result就是reject方法通過參數(shù)傳出的內(nèi)容 console.log('Failed: ' + result); }); }
運(yùn)行結(jié)果:
6.鏈?zhǔn)饺蝿?wù)
Promise還可以做更多的事情,比如,有若干個(gè)異步任務(wù),需要先做任務(wù)1,如果成功后再做任務(wù)2,任何任務(wù)失敗則不再繼續(xù)并執(zhí)行錯(cuò)誤處理函數(shù)。
要串行執(zhí)行這樣的異步任務(wù),不用Promise需要寫一層一層的嵌套代碼。有了Promise,我們只需要簡(jiǎn)單地寫:
job1.then(job2).then(job3).catch(handleError);
例子code
componentDidMount() { // 0.5秒后返回input*input的計(jì)算結(jié)果: function multiply(input) { return new Promise(function (resolve, reject) { console.log('calculating ' + input + ' x ' + input + '...'); setTimeout(resolve, 500, input * input); }); } // 0.5秒后返回input+input的計(jì)算結(jié)果: function add(input) { return new Promise(function (resolve, reject) { console.log('calculating ' + input + ' + ' + input + '...'); setTimeout(resolve, 500, input + input); }); } var p = new Promise(function (resolve, reject) { console.log('start new Promise...'); resolve(123); }); p.then(multiply) .then(add) .then(multiply) .then(add) .then(function (result) { console.log('Got value: ' + result); }); }
運(yùn)行結(jié)果:
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
react配置代理setupProxy.js無法訪問v3.0版本問題
這篇文章主要介紹了react配置代理setupProxy.js無法訪問v3.0版本問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法
本篇文章主要介紹了使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12React路由鑒權(quán)的實(shí)現(xiàn)方法
這篇文章主要介紹了React路由鑒權(quán)的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09解決React在安裝antd之后出現(xiàn)的Can''t resolve ''./locale''問題(推薦)
這篇文章主要介紹了解決React在安裝antd之后出現(xiàn)的Can't resolve './locale'問題,本文給大家分享解決方案,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05React hook 'useState' is calle
這篇文章主要為大家介紹了React hook 'useState' is called conditionally報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12一文教你如何避免React中常見的8個(gè)錯(cuò)誤
這篇文章主要來和大家一起分享在?React?開發(fā)中常見的一些錯(cuò)誤,以及如何避免這些錯(cuò)誤,理解這些問題背后的細(xì)節(jié),防止犯下類似的錯(cuò)誤,需要的可以參考下2023-12-12