這篇文章主要介紹“js中promise的用法介紹”,在日常操作中,相信很多人在js中promise的用法介紹問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”js中promise的用法介紹”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)建站主營云安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),云安h5小程序定制開發(fā)搭建,云安網(wǎng)站營銷推廣歡迎云安等地區(qū)企業(yè)咨詢一、背景
大家都知道nodejs很快,為什么會這么快呢,原因就是node采用異步回調(diào)的方式來處理需要等待的事件,使得代碼會繼續(xù)往下執(zhí)行不用在某個地方等待著。但是也有一個不好的地方,當(dāng)我們有很多回調(diào)的時候,比如這個回調(diào)執(zhí)行完需要去執(zhí)行下個回調(diào),然后接著再執(zhí)行下個回調(diào),這樣就會造成層層嵌套,代碼不清晰,很容易進(jìn)入“回調(diào)監(jiān)獄”,就容易造成下邊的例子:
async(1, function(value){ async(value, function(value){ async(value, function(value){ async(value, function(value){ async(value, function(value){ async(value, final); }); }); }); }); });
這樣的寫法會讓人崩潰,那么有什么辦法可以解決這個問題呢,或者有其他別的寫法嗎?答案是有的,es6新出的promise對象已經(jīng)es7的async await都可以解決這個問題,當(dāng)然這里先介紹promise對象,es7的async await將在后邊的文章中分享。下邊將來介紹Promise對象。
二、簡介
Promise,他是一個對象,是用來處理異步操作的,可以讓我們寫異步調(diào)用的時候?qū)懫饋砀觾?yōu)雅,更加美觀便于閱讀。顧名思義為承諾、許諾的意思,意思是使用了Promise之后他肯定會給我們答復(fù),無論成功或者失敗都會給我們一個答復(fù),所以我們就不用擔(dān)心他跑了哈哈。所以,Promise有三種狀態(tài):pending(進(jìn)行中),resolved(完成),rejected(失?。V挥挟惒椒祷氐慕Y(jié)構(gòu)可以改變其狀態(tài)。所以,promise的過程一般只有兩種:pending->resolved或者pending->rejected。
promise對象還有一個比較常用的then方法,用來執(zhí)行回調(diào)函數(shù),then方法接受兩個參數(shù),第一個是成功的resolved的回調(diào),另一個是失敗rejected的回調(diào),第二個失敗的回調(diào)參數(shù)可選。并且then方法里也可以返回promise對象,這樣就可以鏈?zhǔn)秸{(diào)用了。接下來上代碼:
var Pro = function (time) { //返回一個Promise對象 return new Promise(function (resolve, reject) { console.log('123'); //模擬接口調(diào)用 setTimeout(function () { //這里告訴Promise 成功了,然后去執(zhí)行then方法的第一個函數(shù) resolve('成功返回'); }, time); }) }; (function(){ console.log('start'); Pro(3000) .then(function(data){ console.log(data); return Pro(5000);}) .then(function(data){ console.log(data); console.log('end'); }) })();
上邊代碼中,定義了一個Pro變量,然后把一個匿名函數(shù)賦給他,函數(shù)返回一個Promise對象,然后對象里邊接收一個函數(shù),分別把resolve跟reject方法當(dāng)參數(shù)傳進(jìn)去,用setTimeOut來模擬異步請求,當(dāng)執(zhí)行resolve方法后就會調(diào)用then方法的一個函數(shù)。結(jié)果如下:
三、Promise 的api
1、Promise.resolve()
2、Promise.reject()
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() // 所有的都有完成,相當(dāng)于 且
6、Promise.race() // 完成一個即可,相當(dāng)于 或
1、Promise.resolve()的作用將現(xiàn)有對象轉(zhuǎn)為Promise對象resolvedl;Promise.resolve('test')==new Promise(resolve=>resolve('test'))
2、Promise.reject()也是返回一個Promise對象,狀態(tài)為rejected;
3、then方法上邊已經(jīng)做介紹,這里就不再介紹。
4、catch():發(fā)生錯誤的回調(diào)函數(shù)。
5、Promise.all()適合用于所有的結(jié)果都完成了才去執(zhí)行then()成功的操作。舉個例子:
let p1 =new Promise(function(resolve,reject){ resolve(1); }); let p2 = new Promise(function(resolve,reject){ resolve(2); }); let p3 = new Promise(function(resolve,reject){ resolve(3); }); Promise.all([p1, p2, p3]).then(function (results) { console.log('success:'+results); }).catch(function(r){ console.log("error"); console.log(r); });
最后輸出:
6、Promise.race()的作用也是同時執(zhí)行多個實(shí)例,只要有一個實(shí)例改變狀態(tài),Promise就改為那個實(shí)例所改變的狀態(tài);
四、例子
var Pro = function () { //返回一個Promise對象 return new Promise(function (resolve, reject) { //模擬接口調(diào)用 setTimeout(function () { resolve(true); }, 1000); }) }; var Pro2 = function () { //返回一個Promise對象 return new Promise(function (resolve, reject) { //模擬接口調(diào)用 setTimeout(function () { resolve('Pro2成功執(zhí)行'); }, 1000); }) }; Pro().then(function(data){ var val = data; console.log(val) if (val) { console.log(1111) return Pro2() } }).then(function(data1){ console.log(data1) })
輸出:
這樣就可以用then方法可以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用了。
到此,關(guān)于“js中promise的用法介紹”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。