ES6學習筆記(16)之 Promise

參考:ECMAScript 6 入門

promise對象的特點:

  • 對象的狀態(tài)不受外界影響迈勋,只能內部決定规哲。(三種狀態(tài):pending, fulfilled, rejected)
  • 一旦狀態(tài)改變,就不會再變文兢。
const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok
  • 一旦新建它就會立即執(zhí)行,無法中途取消。
  • 跟傳統(tǒng)的try/catch代碼塊不同的是淌喻,如果沒有使用catch方法指定錯誤處理的回調函數,Promise 對象拋出的錯誤不會傳遞到外層代碼雀摘,即不會有任何反應裸删。(也就是說,即使promise內部有錯誤阵赠,程序也不會崩潰涯塔;想想其它的錯誤,如果不被catch住清蚀,程序就報錯中斷了)
const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行會報錯匕荸,因為x沒有聲明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123
  • 調用resolve或reject并不會終結 Promise 的函數的執(zhí)行。
new Promise((resolve, reject) => {
  resolve(1); // 最好在此處return枷邪,比如:return resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
console.log(3);
// 2
// 3
// 1
  • resolve函數的參數除了正常的值以外榛搔,還可能是另一個 Promise 實例
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail

解釋:(我的理解:then方法只接受確定的狀態(tài)?)

p1是一個 Promise东揣,3 秒之后變?yōu)閞ejected践惑。p2的狀態(tài)在 1 秒之后改變,resolve方法返回的是p1嘶卧。由于p2返回的是另一個 Promise尔觉,導致p2自己的狀態(tài)無效了,由p1的狀態(tài)決定p2的狀態(tài)芥吟。所以侦铜,后面的then語句都變成針對后者(p1)。又過了 2 秒钟鸵,p1變?yōu)閞ejected泵额,導致觸發(fā)catch方法指定的回調函數。

  • then方法返回的是一個新的Promise實例
getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL); // 又返回一個promise對象携添,該對象的返回結果將在下一個then中處理
}).then(function (comments) {
  console.log("resolved: ", comments);
}).catch(function (err){ 
//該catch方法有可能捕獲第一個promise對象的錯誤嫁盲,也有可能捕獲第二個promise的錯誤
//Promise 對象的錯誤具有“冒泡”性質,會一直向后傳遞,直到被捕獲為止羞秤。也就是說缸托,錯誤總是會被下一個catch語句捕獲。
  console.log("rejected: ", err);
});

promise的幾個API的介紹:

Promise.prototype.finally()

  • ES2018(ES9)的標準瘾蛋,ES6中還沒有俐镐。
  • 無論成功失敗都執(zhí)行的操作。

Promise.all()

  • Promise.all方法的參數可以是數組哺哼,比如Promise.all([p1, p2, p3])
  • p1佩抹、p2、p3都是 Promise 實例取董,如果不是棍苹,就會先調用Promise.resolve方法,將參數轉為 Promise 實例茵汰,再進一步處理枢里。
  • 參數也可以是具有 Iterator 接口的對象,且返回的每個成員都是 Promise 實例蹂午。
  • p1, p2, p3都成功時all方法才成功栏豺,只要有一個失敗,all方法就失敗豆胸。

Promise.race()

  • 參數要求同Promise.all()
  • p1, p2, p3誰先執(zhí)行完有結果奥洼,race 的 then(或catch)方法就執(zhí)行誰的,這就體現出了賽跑的特點晚胡。

Promise. resolve()

  • 將現有對象轉為 Promise 對象
  • 可以接受什么參數呢溉卓?
    1)如果參數是 Promise 實例,那么Promise.resolve將不做任何修改搬泥、原封不動地返回這個實例。
    2)如果參數是一個thenable對象伏尼。thenable對象指的是具有then方法的對象忿檩,比如下面這個對象。
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

3)參數為一般的對象爆阶,或根本不是對象燥透。作為返回值返回。(如果參數為空辨图,可以認為返回undefined)

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

Promise. reject()

  • Promise. resolve()的不同:
    Promise.reject()方法的參數班套,會原封不動地作為reject的理由,變成后續(xù)方法的參數
const thenable = {
  then(resolve, reject) {
    reject('出錯了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

Promise.try()
作用:將同步異步方法統(tǒng)一處理故河,可以更好地管理異常吱韭。

function getUsername(userId) {
  return database.users.get({id: userId})
  .then(function(user) {
    return user.name;
  });
}

上面代碼中,database.users.get()返回一個 Promise 對象鱼的,如果拋出異步錯誤理盆,可以用catch方法捕獲痘煤,就像下面這樣寫。

database.users.get({id: userId})
.then(...)
.catch(...)

但是database.users.get()可能還會拋出同步錯誤(比如數據庫連接錯誤猿规,具體要看實現方法)衷快,這時你就不得不用try...catch去捕獲。

try {
  database.users.get({id: userId})
  .then(...)
  .catch(...)
} catch (e) {
  // ...
}

上面這樣的寫法就很笨拙了姨俩,這時就可以統(tǒng)一用promise.catch()捕獲所有同步和異步的錯誤蘸拔。

Promise.try(() => database.users.get({id: userId}))
  .then(...)
  .catch(...)
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市环葵,隨后出現的幾起案子调窍,更是在濱河造成了極大的恐慌,老刑警劉巖积担,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件陨晶,死亡現場離奇詭異,居然都是意外死亡帝璧,警方通過查閱死者的電腦和手機先誉,發(fā)現死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來的烁,“玉大人褐耳,你說我怎么就攤上這事】是欤” “怎么了铃芦?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長襟雷。 經常有香客問我刃滓,道長,這世上最難降的妖魔是什么耸弄? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任咧虎,我火速辦了婚禮,結果婚禮上计呈,老公的妹妹穿的比我還像新娘砰诵。我一直安慰自己,他們只是感情好捌显,可當我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布茁彭。 她就那樣靜靜地躺著,像睡著了一般扶歪。 火紅的嫁衣襯著肌膚如雪理肺。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天,我揣著相機與錄音哲嘲,去河邊找鬼贪薪。 笑死,一個胖子當著我的面吹牛眠副,可吹牛的內容都是我干的画切。 我是一名探鬼主播,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼囱怕,長吁一口氣:“原來是場噩夢啊……” “哼霍弹!你這毒婦竟也來了?” 一聲冷哼從身側響起娃弓,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤典格,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后台丛,有當地人在樹林里發(fā)現了一具尸體耍缴,經...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年挽霉,在試婚紗的時候發(fā)現自己被綠了防嗡。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡侠坎,死狀恐怖蚁趁,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情实胸,我是刑警寧澤他嫡,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站庐完,受9級特大地震影響钢属,放射性物質發(fā)生泄漏。R本人自食惡果不足惜门躯,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一淆党、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧生音,春花似錦、人聲如沸窒升。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽饱须。三九已至域醇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背譬挚。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工锅铅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人减宣。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓盐须,卻偏偏與公主長得像,于是被迫代替她去往敵國和親漆腌。 傳聞我的和親對象是個殘疾皇子贼邓,可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2 355

推薦閱讀更多精彩內容

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調函...
    neromous閱讀 8,707評論 1 56
  • 1. Promise 的含義 所謂Promise闷尿,簡單說就是一個容器塑径,里面保存著某個未來才會結束的事件(通常是一個...
    ROBIN2015閱讀 497評論 0 0
  • //本文內容起初摘抄于 阮一峰 作者的譯文,用于記錄和學習填具,建議觀者移步于原文 概念: 所謂的Promise统舀,...
    曾經過往閱讀 1,239評論 0 7
  • 原文地址:http://es6.ruanyifeng.com/#docs/promise Promise 的含義 ...
    AI云棧閱讀 874評論 0 7
  • 『ES6腳丫系列』Promise Promise 文本主要內容如下: * Promise是什么? * 1.1 特點...
    吃碼小妖閱讀 995評論 0 12