這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)Promise的介紹及基本用法是什么抒抬,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述熙涤,閱讀完這篇文章希望大家可以有所收獲厉颤。
Promise是ES6引入的異步編程的新解決方案锻离。語法止Promise是-一個構(gòu)造函數(shù)劝堪,
用來封裝異步操作并可以獲取其成功或失敗的結(jié)果。
Promise 構(gòu)造函數(shù): Promise (excutor) {}
Promise.prototype.then 方法
Promise.prototype.catch 方法
Promise的基本使用
實例化Promise
newPromise()
在實例化的時候接受一個參數(shù)弹囚, 這個參數(shù)是一個函數(shù)厨相。
這個函數(shù)有兩個形參,resolve 和?reject
varpromise?=newPromise((resolve,reject)?=>{//?里面用于處理異步操作})
我們在這里使用定時器來模擬異步操作
promise有三種狀態(tài)鸥鹉,分別是:進行中蛮穿、成功、失敗毁渗。
varpromise?=newPromise((resolve,reject)?=>{//?這是一個異步操作setTimeout(()=>{//?這里模擬獲取數(shù)據(jù)vardata?='獲取的數(shù)據(jù)'//?在得到數(shù)據(jù)之后我們可以調(diào)用resolve和reject方法來改變promise對象的狀態(tài)resolve(data)//?resolve可以將promise對象的狀態(tài)改為成功践磅,reject()可以promise將對象狀態(tài)改為失敗},1000);})
promise的then方法
當promise對象的狀態(tài)為成功或者失敗時可以調(diào)用then方法
then方法接受兩個參數(shù),而且兩個參數(shù)都是函數(shù)類型的值
promise對象的狀態(tài)為成功時灸异,會調(diào)用then方法的第一個參數(shù)
也是就說promise對象的狀態(tài)為失敗時音诈,會調(diào)用then方法的第二個參數(shù)
第二個參數(shù)時可選的,如果不需要捕獲失敗可以省略
參數(shù)分別有一個形參绎狭,成功的函數(shù)叫value, 失敗的err
promise.then(value=>{//?當異步函數(shù)里面調(diào)用了resolve(data)细溅,也是就說promise對象的狀態(tài)為成功時,會調(diào)用then方法的第一個參數(shù)console.log(value);//?'hello?world'?value就是resolve()方法傳遞過來的數(shù)據(jù)},err=>{//?當異步函數(shù)里面調(diào)用了reject(data)儡嘶,也是就說promise對象的狀態(tài)為失敗時喇聊,會調(diào)用then方法的第二個參數(shù)console.log(err);//?err就是reject()方法傳遞過來的數(shù)據(jù)?})
調(diào)用then方法then方法的返回結(jié)果是Promise 對象,對象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定
如果回調(diào)函數(shù)中返回的結(jié)果是非promise類型的屬性蹦狂,狀態(tài)為成功誓篱,返回值為對象的成功的值
letdata?=?promise.then((val)?=>{//?console.log(val.result);//?返回非Promise的情況//?return?val.result//?返回Promise的情況returnnewPromise((resolve,?reject)?=>{//?resolve('ok')reject('err')????})},err=>{console.log(err);})//?返回非Promise的情況?狀態(tài)為成功朋贬,返回值為對象的成功的值?//?返回結(jié)果是Promise?對象,對象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定//?拋出錯誤,狀態(tài)為失敗console.log(data);
所以then可以鏈式調(diào)用使用方法可參見下面promise應(yīng)用示例窜骄。
promise的catch方法
promise的catch方法是then(null, rejection)的別名锦募,用于指定發(fā)生錯誤時的回調(diào)
Promise對象的狀態(tài)為resolve,就會調(diào)用then方法的指定回調(diào)函數(shù)
constpromise?=newPromise((resolve,?reject)?=>{????resolve('ok')})promise.then(val=>{console.log(val);//?ok}).catch(err=>{console.log(err);})
如果promise的狀態(tài)為rejected就會調(diào)用catch方法的回調(diào)函數(shù)來處理這個問題邻遏。
constpromise?=newPromise((resolve,?reject)?=>{????reject('err')})promise.then(val=>{console.log(val);}).catch(err=>{console.log(err);//?err})
如果then方法在運行中出現(xiàn)錯誤也會被catch方法捕獲
constpromise?=newPromise((resolve,?reject)?=>{????resolve('err')})promise.then(val=>{console.log('ok');//?okthrow'出錯了?纺丁!'//?then里面拋出的錯誤會繼續(xù)被catch捕獲}).catch(err=>{console.log(err);//?出錯了W佳椤赎线!})
promise對象的錯誤具有冒泡的性質(zhì),會一直向后傳遞糊饱,直到被捕獲為止垂寥。也就是說,錯誤總是會被下一個catch捕獲另锋。
constpromise?=newPromise((resolve,?reject)?=>{????resolve('ok')})promise.then(val=>{returnnewPromise((resolve,?reject)?=>{????????reject('err')????})}).then(val=>{returnnewPromise((resolve,?reject)?=>{????????reject('err')????})}).catch(err=>{//?以上產(chǎn)生的錯誤都可以被catch捕獲到console.log(err);//?err})
一般來說滞项,不要在then方法中定義rejected狀態(tài)回調(diào)函數(shù)(即then的第二個參數(shù)),而應(yīng)總是使用catch方法夭坪。
promise應(yīng)用?
promise讀取文件文判,多個文件連續(xù)調(diào)用
在這個例子中我們用到了Node.js的文件模塊
//?讀取文件信息constfs?=require('fs')
在下面代碼中我們使用了promise包裝了異步函數(shù)
我們先來看看正常的文件讀取操作
//?讀取文件信息constfs?=require('fs')//?如果讀取失敗err就是一個錯誤對象,讀取成功data就是數(shù)據(jù)fs.readFile('./01.txt',(err,?data)?=>{//?判斷是否出現(xiàn)錯誤台舱,如果讀取錯誤就打印錯誤對象律杠。if(err)?{console.log(err);return}console.log(data.toString());})
我們?nèi)绻朐谧x取成功之后繼續(xù)讀取文件潭流,就需要在回調(diào)函數(shù)中繼續(xù)使用fs.readFile...去讀取文件竞惋,嵌套層次一多,這樣一來就會形成回調(diào)地獄灰嫉。?
接下來我們使用Promise的方式來讀取文件
//?讀取文件信息constfs?=require('fs')constpromise?=newPromise((resolve,?reject)?=>{????fs.readFile('./01.txt',(err,?data)?=>{if(err)returnreject(err)????????resolve(data)????})})?promise.then(val=>{console.log(val.toString());//?返回一個Promise對象returnnewPromise((resolve,?reject)?=>{????????fs.readFile('./02.txt',(err,?data)?=>{if(err)returnreject(err)????????????resolve(data)????????})????})},err=>{console.log(err);})//?上一個then里面返回的是一個promise對象拆宛,我們可以繼續(xù).then.then(val=>{console.log(val.toString());returnnewPromise((resolve,?reject)?=>{????????fs.readFile('./03.txt',(err,?data)?=>{if(err)returnreject(err)????????????resolve(data)????????})????})},err=>{console.log(err);}).then(val=>{console.log(val.toString());},err=>{console.log(err);})
promise封裝ajax請求
封裝了ajax請求,使用then獲取結(jié)果讼撒,讓代碼看起來更加簡潔浑厚,解決了回調(diào)地獄的問題
constpromise?=newPromise((resolve,?reject)?=>{//?創(chuàng)建對象constxhr?=newXMLHttpRequest()//?初始化xhr.open("GET",'https://api.apiopen.top/getSongPoetry?page=1&count=20')//?發(fā)送xhr.send()//?綁定事件處理響應(yīng)結(jié)果xhr.onreadystatechange?=function(){//?判斷//?進入最后一個階段,所有的響應(yīng)體都回來了if(xhr.readyState?===4)?{//?判斷響應(yīng)碼if(xhr.status?>=200&&?xhr.status?<300)?{//?表示成功//?console.log(JSON.parse(xhr.response));resolve(JSON.parse(xhr.response))????????????}else{????????????????reject(xhr.status)????????????}????????}????}})//?指定回調(diào)promise.then((val)?=>{console.log(val);},err=>{console.log(err);})
上述就是小編為大家分享的Promise的介紹及基本用法是什么了根盒,如果剛好有類似的疑惑钳幅,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識炎滞,歡迎關(guān)注億速云行業(yè)資訊頻道敢艰。