您好,登錄后才能下訂單哦!
這篇“javascript中的Promise怎么使用”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“javascript中的Promise怎么使用”文章吧。
在介紹Promise
之前,首先來了解一下JavaScript的特性。搞前端開發(fā)的都知道JS是一個傳統(tǒng)的單線程編程,它里面的程序運行都是同步的,只有一個主線程,但是隨著技術的發(fā)展,為了解決前期的缺陷,引入了異步思想,也就是一個異步過程的執(zhí)行將不再與原有的序列有順序關系,這就解決了同步執(zhí)行引起的執(zhí)行效率不高的缺陷。用一句話解釋:異步就是從主線程發(fā)射一個子線程來完成任務。
再來了解一下Promise,Promise是ES6新增加的,它是一個由ES6提供的類,其主要目的就是很好的處理復雜的異步任務,但是它不是任何瀏覽器都能支持,比如一些舊版本的瀏覽器就不支持,只有蘋果的Safari10和Windows的Edge14版本以上瀏覽器才開始支持ES6特性的。
Promise作為替代回調(diào)函數(shù)執(zhí)行,作為異步操作的處理方法;是JS異步執(zhí)行時候,回調(diào)函數(shù)嵌套回調(diào)函數(shù)的這一問題的解決方法,Promise更簡潔地控制函數(shù)執(zhí)行流程。Promise對象其實表示是一個異步操作的最終成敗,以及結(jié)果值,也就是一個代理值,是ES6中的一種異步回調(diào)解決方案。
Promise對象代理的值其實是未知的,狀態(tài)是動態(tài)可變的,因此Promise對象的狀態(tài)有三種:進行中、結(jié)束、失敗,它運行的時候,只能從進行中到失敗,或者是從進行中到成功。使用Promise對象只要是通過同步的表達形式來運行異步代碼。
①pending:初始狀態(tài),既不成功,也不失??;
②fulfilled:操作成功結(jié)束;
③rejected:操作失敗。
怎么構(gòu)造Promise?這里簡單舉一個構(gòu)造Promise的示例:
new Promise(function (resolve, reject) { // 要做的事情... });
通過上面新構(gòu)造一個Promise
對象好像并沒有看出它是怎樣很好的處理復雜的異步任務的,那么接下來就是Promise的核心操作。
回調(diào)地獄也叫回調(diào)嵌套或者函數(shù)混亂的調(diào)用,通俗點講就是:需要發(fā)送三個網(wǎng)絡請求,第三個請求依賴第二個請求的結(jié)果,第二個請求依賴第一個請求的結(jié)果。不斷增加的嵌套使用。
回調(diào)函數(shù)的弊病:
開發(fā)者閱讀起來很費神、吃力,不利于排查錯誤,更不能直接return,等等。如:
setTimeout(() => { console.log(1) setTimeout(() => { console.log(2) setTimeout(() => { console.log(3) },3000) },2000) },1000)
Promise 構(gòu)造函數(shù)只有一個參數(shù),是一個函數(shù),這個函數(shù)在構(gòu)造之后會直接被異步運行,所以我們稱之為起始函數(shù)。起始函數(shù),也就是Promise的構(gòu)造函數(shù)里面有兩個參數(shù):resolve和reject,該兩個參數(shù)表示的是異步操作的結(jié)果,也就是Promise成功或失敗的狀態(tài)。
當 Promise 被構(gòu)造時,起始函數(shù)會被異步執(zhí)行;resolve 和 reject 都是函數(shù),其中調(diào)用 resolve 代表一切正常,reject 是出現(xiàn)異常時所調(diào)用的。
①異步操作成功,調(diào)用resolve函數(shù),將Promise對象的狀態(tài)改為fulfilled。
②異步操作失敗,調(diào)用rejected函數(shù),將Promise對象的狀態(tài)改為rejected。
舉一個使用例子,比較規(guī)范的寫法是把Promise封裝到一個函數(shù)里然后同時返回一個Promise,如下所示:
const delay = (millisecond) => { return new Promise((resolve, reject)=>{ if (typeof millisecond != 'number') reject(new Error(‘必須是number類型')); setTimeout(()=> { resolve(`延遲${millisecond}毫秒后輸出`) }, millisecond) }) }
上述例子可以看到Promise有兩個參數(shù):resolve和reject。resolve:將異步的執(zhí)行從pending(請求)變成了resolve(成功返回),是個函數(shù)執(zhí)行返回;reject:見名知意為“拒絕”,從請求變成了"失敗",是函數(shù)可以執(zhí)行返回的一個失敗結(jié)果,推薦返回一個錯誤new Error(),這樣做更加清晰明了,更加規(guī)范。
若傳入的是非Promise
,基本數(shù)據(jù)類型的數(shù)據(jù),則返回成功的Promise;若傳入的是Promise,則該對象的結(jié)果就決定了resolve的返回結(jié)果值。
let obj =new Promise((resolve,reject)=>{ resolve(‘yes'); }); //1.若傳入的是非Promise,基本數(shù)據(jù)類型的數(shù)據(jù),則返回成功的Promise。 let p1= Promise.resolve('123') //2.若傳入的是Promise,則該對象的結(jié)果就決定了resolve的返回結(jié)果值。 let p2 = Promise.resolve(obj); //3.嵌套使用 let p3 = Promise.resolve(Promise.resolve(Promise.resolve('abc'))); console.log(p3);
Promise.prototype.reject,始終返回的是失敗的Promise。
let p = Promise.reject(123123); let p2 = Promise.reject('abc'); let p3 = Promise.reject(Promise.resolve('ok')); console.log(p3);
Promise的API里面常用的幾個方法有:then、catch、finally、all、race等,具體的使用方法下面一一道來。
then指定成功或失敗的回調(diào)到當前的Promise。then里面拿到的Promise resolve里面的數(shù)據(jù),并返回一個Promise繼續(xù)提供使用;then方法返回的結(jié)果由then指定回調(diào)函數(shù)決定。
實例如下所示:
let p=new Promise((resolve,reject)=>{ resolve(‘yes') }) p.then(value=>{ console.log(value) //這里的value就是上面的yes },reason=>{ console.error(reason) })
catch指定失敗的回調(diào),返回的是失敗的結(jié)果。
實例如下所示:
let p =new Promise((resolve,reject)=>{ reject('失??!'); }) p.then(value=>{},reason=>{ console.error(reason); }) p.catch(reason=>{ console.error(reason) })
finally用來進行收尾工作,無論Promise的狀態(tài)成功和失敗與否,當執(zhí)行完回調(diào)函數(shù)之后,都會去finally尋找最后的回調(diào)函數(shù)來執(zhí)行。
實例如下所示:
request.finally(function(){ // 最后,而且一定會執(zhí)行的代碼 })
在多個Promise任務一起執(zhí)行的時候,若全部成功,則返回一個新的Promise,若其中有一個失敗,則返回失敗的Promise對象。
實例如下所示:
let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(‘yes'); }, 1000); }); let p2 = Promise.resolve('ok'); let p3 = Promise.reject('Oh no'); //所有的 let result = Promise.all([p1, p2, p3]); console.log(result);
在多個Promise任務同步執(zhí)行的時候,返回最先結(jié)束的Promise任務結(jié)果,無論最后是成功還是失敗,通俗點將:先到先得。
實例如下所示:
let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(‘yes'); }, 1000); }); let p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('ok'); }, 500); }); let result = Promise.race([p1, p2]); console.log(result); //p2 ok
以上就是關于“javascript中的Promise怎么使用”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關的知識內(nèi)容,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。