誠之和:Promise的介紹及基本用法是什么

這期內(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è)資訊頻道敢艰。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市册赛,隨后出現(xiàn)的幾起案子钠导,更是在濱河造成了極大的恐慌震嫉,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牡属,死亡現(xiàn)場離奇詭異票堵,居然都是意外死亡,警方通過查閱死者的電腦和手機逮栅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門悴势,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人证芭,你說我怎么就攤上這事瞳浦。” “怎么了废士?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵叫潦,是天一觀的道長。 經(jīng)常有香客問我官硝,道長矗蕊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任氢架,我火速辦了婚禮傻咖,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘岖研。我一直安慰自己卿操,他們只是感情好,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布孙援。 她就那樣靜靜地躺著害淤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拓售。 梳的紋絲不亂的頭發(fā)上窥摄,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機與錄音础淤,去河邊找鬼崭放。 笑死,一個胖子當著我的面吹牛鸽凶,可吹牛的內(nèi)容都是我干的币砂。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼玻侥,長吁一口氣:“原來是場噩夢啊……” “哼决摧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蜜徽,失蹤者是張志新(化名)和其女友劉穎祝懂,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拘鞋,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡砚蓬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了盆色。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灰蛙。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖隔躲,靈堂內(nèi)的尸體忽然破棺而出摩梧,到底是詐尸還是另有隱情,我是刑警寧澤宣旱,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布仅父,位于F島的核電站,受9級特大地震影響浑吟,放射性物質(zhì)發(fā)生泄漏笙纤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一组力、第九天 我趴在偏房一處隱蔽的房頂上張望省容。 院中可真熱鬧,春花似錦燎字、人聲如沸腥椒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽笼蛛。三九已至,卻和暖如春脱柱,著一層夾襖步出監(jiān)牢的瞬間伐弹,已是汗流浹背拉馋。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工榨为, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人煌茴。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓随闺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蔓腐。 傳聞我的和親對象是個殘疾皇子矩乐,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,706評論 1 56
  • Promise.then 函數(shù)接受兩個函數(shù),第一個函數(shù)執(zhí)行成功回調(diào)(onResolve)散罕,第二個函數(shù)執(zhí)行錯誤回調(diào)(...
    三七_小九閱讀 2,220評論 0 0
  • > 簡述: ## 什么是Promise分歇? -Promise是用來處理異步的; -Promise就是承諾,對未來的承...
    風雪中的兔子閱讀 386評論 0 0
  • 首先說一下promise 是什么误甚? 1缚甩、本質(zhì)是構(gòu)造函數(shù)中主要用于異步計算 2、可以將異步操作隊列化窑邦,按照期望的順序...
    只是墨辰閱讀 2,418評論 0 0
  • promise是什么擅威? 1、主要用于異步計算 2冈钦、可以將異步操作隊列化郊丛,按照期望的順序執(zhí)行,返回符合預(yù)期的結(jié)果 3...
    欣欣程序猿閱讀 147評論 0 0