promise 學(xué)習(xí)筆記

promise 是什么

Promise 對(duì)象用于一個(gè)異步操作的最終完成(或失斂纸酢)及其結(jié)果值的表示往果。(簡(jiǎn)單說(shuō)就是處理異步請(qǐng)求。一個(gè)諾言一铅,一個(gè)成功陕贮,一個(gè)失敗。)

看個(gè)例子

var promise = new Promise(function(resolve){
    resolve(42);
});
promise.then(function(value){
    console.log(value);
}).catch(function(error){
    console.error(error);
});

運(yùn)行后潘飘,打印出42肮之,為什么會(huì)是42呢?帶著這個(gè)疑惑繼續(xù)放下看

promise 狀態(tài)

一個(gè)Promise必須處在其中之一的狀態(tài):pending, fulfilled 或 rejected.

pending 狀態(tài):可以轉(zhuǎn)換到 fulfilled 或 rejected 狀態(tài)福也。
fulfilled 狀態(tài):不能轉(zhuǎn)換成任何其它狀態(tài)局骤;必須有一個(gè)值,且這個(gè)值不能被改變暴凑。
rejected 狀態(tài):不能轉(zhuǎn)換成任何其它狀態(tài)峦甩;必須有一個(gè)值,且這個(gè)值不能被改變现喳。

promise 對(duì)象

創(chuàng)建 promise 對(duì)象

1.new Promise(fn) 返回一個(gè) promise 對(duì)象凯傲。

2.fn是個(gè)函數(shù),fn有兩個(gè)參數(shù)

  • resolve:處理結(jié)果成功的時(shí)候調(diào)用resolve(處理結(jié)果值)嗦篱。
  • reject:處理結(jié)果錯(cuò)誤的時(shí)候調(diào)用reject(Error對(duì)象)冰单。

then 方法

一個(gè) Promise 必須提供一個(gè) then 方法來(lái)獲取其值。

Promise 的 then 方法接受兩個(gè)參數(shù):

promise.then(onFulfilled,onRejected)

1.onFulfilled 和 onRejected 都是函數(shù)灸促,如果不是函數(shù)诫欠,則忽略之涵卵。
2.onFulfilled :resolve(成功)時(shí)調(diào)用 onFulfilled,必須在promise fulfilled后調(diào)用荒叼,且promise的value為其第一個(gè)參數(shù)轿偎,不能多次調(diào)用。
3.onRejected:reject(失敗)時(shí)調(diào)用 onRejected被廓,必須在promise rejected后調(diào)用坏晦, 且promise的reason為其第一個(gè)參數(shù),不能被多次調(diào)用嫁乘。

.catch只是 promise.then(undefined, onRejected) 的別名而已昆婿。

Promise.reject(new Error("BOOM!")).catch(function(error){
    console.error(error);  // Error: BOOM!
});

開始那個(gè)例子就變成簡(jiǎn)單明了,relove(42) 成功是調(diào)用function(value){console.log(value)}蜓斧,所以打印出 42 仓蛆。

對(duì)于一個(gè) promise,它的 then 方法可以調(diào)用多次挎春。

promise.then(onFulfilled,onRejected).then(onFulfilled,onRejected);
promise.then(onFulfilled,onRejected); promise.then(onFulfilled,onRejected);

then 必須返回一個(gè) promise

promise2 = promise1.then(onFulfilled, onRejected);

創(chuàng)建 XHR 的promise 對(duì)象

function ajax(options){
  return new Promise(function(resolve,reject){
    let {method,url} = options;
    let xhr = new XMLHttpRequest();
    xhr.open(method,url);
    xhr.onload = function(){
      if(xhr.status === 200){
        resolve(xhr.responseText)
      }else{
        reject(new Error(xhr.statusText))
      }
    };
    xhr.onerror = function(){
      reject(new Error(xhr.statusText))
    };
    xhr.send()
  })
}
// 運(yùn)行
var promise = ajax({method:'GET',url:'xxx.json'});
promise.then(function(value){
  console.log(value)
},function(reason){
  console.error(reason)
})
// xxx.json
{
  "name":"jack",
  "nationality":"china"
}

ajax 只有在通過(guò)XHR取得結(jié)果狀態(tài)為200時(shí)才會(huì)調(diào)用 resolve 多律。而其他情況(取得失敗)時(shí)則會(huì)調(diào)用 reject 方法搂蜓。

當(dāng)調(diào)用成功時(shí),打印出

{
  "name":"jack",
  "nationality":"china"
}

我們把 url 地址故意寫錯(cuò)辽装,調(diào)用失敗帮碰,將會(huì)報(bào)錯(cuò),顯示如下

Error: Not Found

Promise 是同步還是異步執(zhí)行

再看個(gè)例子

console.log(1)
setTimeout(function(){
  console.log(2)
},0)
var promise =new Promise(function(resolve){
  resolve(3)
}).then(function(value){
  console.log(value)
})
console.log(4)

打印出1 4 3 2拾积。

Promise 是異步執(zhí)行的殉挽。有個(gè)問題,為什么 setTimeout 模擬異步會(huì)比 promise 晚出現(xiàn)呢?

這就涉及到 microtask 和 macrotask 問題拓巧。簡(jiǎn)單說(shuō)斯碌,promise 排在了異步下批執(zhí)行的第一梯隊(duì),而setTimeout 則排在第二梯隊(duì)肛度。

Promise API

Promise.all 接收一個(gè) promise對(duì)象的數(shù)組作為參數(shù)傻唾,當(dāng)這個(gè)數(shù)組里的所有promise對(duì)象全部變?yōu)閞esolve或reject狀態(tài)的時(shí)候,它才會(huì)去調(diào)用 .then 方法承耿。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise(function(resolve) {
  setTimeout(resolve, 500, "foo");
});
Promise.all([p1, p2, p3]).then(function(value) {
  console.log(value); // [3, 1337, "foo"] 
});

Promise.race 接收一個(gè) promise對(duì)象的數(shù)組作為參數(shù)冠骄,只要有一個(gè)promise對(duì)象進(jìn)入 FulFilled 或者 Rejected 狀態(tài)的話,就會(huì)繼續(xù)進(jìn)行后面的處理加袋。

var p5 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 500, "five");
});
var p6 = new Promise(function(resolve, reject) {
  setTimeout(reject, 100, "six");
});
Promise.race([p5, p6]).then(function(value) {
  console.log(value)
}, function(reason) {
  console.log(reason); // "six"
  // p6 更快凛辣,所以它失敗了
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市职烧,隨后出現(xiàn)的幾起案子扁誓,更是在濱河造成了極大的恐慌防泵,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,366評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蝗敢,死亡現(xiàn)場(chǎng)離奇詭異捷泞,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)前普,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門肚邢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人拭卿,你說(shuō)我怎么就攤上這事骡湖。” “怎么了峻厚?”我有些...
    開封第一講書人閱讀 165,689評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵响蕴,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我惠桃,道長(zhǎng)浦夷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,925評(píng)論 1 295
  • 正文 為了忘掉前任辜王,我火速辦了婚禮劈狐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘呐馆。我一直安慰自己肥缔,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,942評(píng)論 6 392
  • 文/花漫 我一把揭開白布汹来。 她就那樣靜靜地躺著续膳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪收班。 梳的紋絲不亂的頭發(fā)上坟岔,一...
    開封第一講書人閱讀 51,727評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音摔桦,去河邊找鬼社付。 笑死,一個(gè)胖子當(dāng)著我的面吹牛酣溃,可吹牛的內(nèi)容都是我干的瘦穆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,447評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼赊豌,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼扛或!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起碘饼,我...
    開封第一講書人閱讀 39,349評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤熙兔,失蹤者是張志新(化名)和其女友劉穎悲伶,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體住涉,經(jīng)...
    沈念sama閱讀 45,820評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡麸锉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,990評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了舆声。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片花沉。...
    茶點(diǎn)故事閱讀 40,127評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖媳握,靈堂內(nèi)的尸體忽然破棺而出碱屁,到底是詐尸還是另有隱情,我是刑警寧澤蛾找,帶...
    沈念sama閱讀 35,812評(píng)論 5 346
  • 正文 年R本政府宣布娩脾,位于F島的核電站,受9級(jí)特大地震影響打毛,放射性物質(zhì)發(fā)生泄漏柿赊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,471評(píng)論 3 331
  • 文/蒙蒙 一幻枉、第九天 我趴在偏房一處隱蔽的房頂上張望碰声。 院中可真熱鬧,春花似錦熬甫、人聲如沸奥邮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至脚粟,卻和暖如春覆旱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背核无。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工扣唱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人团南。 一個(gè)月前我還...
    沈念sama閱讀 48,388評(píng)論 3 373
  • 正文 我出身青樓噪沙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親吐根。 傳聞我的和親對(duì)象是個(gè)殘疾皇子正歼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,066評(píng)論 2 355

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

  • Promiese 簡(jiǎn)單說(shuō)就是一個(gè)容器,里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果拷橘,語(yǔ)法上說(shuō)局义,Pr...
    雨飛飛雨閱讀 3,360評(píng)論 0 19
  • 00萄唇、前言Promise 是異步編程的一種解決方案檩帐,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)...
    夜幕小草閱讀 2,133評(píng)論 0 12
  • 本文適用的讀者 本文寫給有一定Promise使用經(jīng)驗(yàn)的人另萤,如果你還沒有使用過(guò)Promise湃密,這篇文章可能不適合你,...
    HZ充電大喵閱讀 7,311評(píng)論 6 19
  • //本文內(nèi)容起初摘抄于 阮一峰 作者的譯文四敞,用于記錄和學(xué)習(xí)泛源,建議觀者移步于原文 概念: 所謂的Promise,...
    曾經(jīng)過(guò)往閱讀 1,239評(píng)論 0 7
  • Promise的含義: ??Promise是異步編程的一種解決方案目养,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和...
    呼呼哥閱讀 2,170評(píng)論 0 16