1.Promise是什么段磨?
? ? 主要用于異步計算,可以將異步操作隊列化蜓竹,按照期望的順序執(zhí)行箕母,返回符合預期的結果。
可以在對象之間傳遞和操作Promise俱济,幫助我們處理隊列嘶是。
2.異步產(chǎn)生的原因
? ? JavaScript為檢查表單而生,創(chuàng)造它的首要目標是操作DOM蛛碌,所以JavaScript的操作大多是異步的聂喇。
? ? 異步,A和B任務的交付順序和安排順序無關蔚携。? ??
3.Promise詳解
????Promise是一個代理對象希太,它和原先要進行的操作并無關系。
????它通過引入一個回調(diào)酝蜒,避免更多的回調(diào)誊辉。
? ? Promise 有3個狀態(tài):
? ? ? ? ? ? pending【待定】初始狀態(tài)
? ? ? ? ? ? fulfilled【實現(xiàn)】操作成功
? ? ? ? ? ? rejected【被否決】操作失敗
? ? ? 當Promise狀態(tài)發(fā)生改變,就會觸發(fā).then()里的響應函數(shù)處理后續(xù)步驟亡脑。
? ? ? ?Promise狀態(tài)如果已經(jīng)改變芥映,不會再變。
4. .then()
? ? ? ? .then()接受兩個函數(shù)作為參數(shù)远豺,分別代表fulfilled和rejected
? ? ? ? .then()返回一個新的Promise實例奈偏,所以它可以鏈式調(diào)用
? ? ? ? 當前面的Promise狀態(tài)改變時,.then()根據(jù)其最終狀態(tài)躯护,選擇特定的狀態(tài)響應函數(shù)執(zhí)行惊来。
? ? ? ? 狀態(tài)響應函數(shù)可以返回新的Promise,或其它值(不返回也可以棺滞,我們默認返回一個空)
? ? ? ? 如果返回新的Promise裁蚁,那么下一級.then()會在新的Promise狀態(tài)改變之后執(zhí)行矢渊。
? ? ? ? 如果返回其它任何值,則會立刻執(zhí)行下一級.then()
5. .then()里有.then()的情況
? ? ? ? 因為.then()返回的還是Promise實例
6.錯誤處理
????????Promise會自動捕獲內(nèi)部異常枉证,并交給rejected響應函數(shù)處理??
? ? ? ? 錯誤處理的兩種做法:
? ? ? ? 1.reject(‘錯誤信息’).then(null.message = > {})
? ? ? ? 2.throw new Error('錯誤信息').catch(message = > {})
? ? ? ? 3.推薦使用第二種矮男,更加清晰好讀,并且可以捕獲前面的錯誤室谚。
7.catch() + .then()
? ? ? ? 強烈建議在所有隊列最后都加上毡鉴。catch(),以避免漏掉錯誤處理造成意想不到的問題秒赤。
8.Promise常用的函數(shù)
? ? ? ? 1.Promise.all()
? ? ? ? ? ? ? ? Promise.all([p1,p2,p3,....])用于將多個Promise實例猪瞬,包裝成一個新的Promise實例。返回的實例就是普通Promise
? ? ? ? ? ? ? ? 它接受一個數(shù)組作為參數(shù)入篮,數(shù)組里可以是Promise對象陈瘦,也可以是別的值,只有Promise會等待狀態(tài)改變潮售。
? ? ? ? ? ? ? ? 當所有子Promise都完成痊项,該Promise完成,返回值是全部值的數(shù)組
? ? ? ? ? ? ? ? 有任何一個失敗酥诽,該Promise失敗鞍泉,返回值是第一個失敗的子Promise的結果
? ????Promise.all()最常見就是和.map()連用。
? ?實現(xiàn)隊列
? ? ? ? 使用.forEach()
? ? ? ? ? ? ? ? 常見錯誤:沒有爸.then()產(chǎn)生的新Promise實例賦給promise盆均,沒有生成隊列塞弊。
? ? ? ? 使用.reduce()
? ? ? ? ? ? ? ? 常見錯誤:Promise實例創(chuàng)建之后漱逸,會立刻運行執(zhí)行代碼泪姨,所以這個也無法達成隊列效果。
? ??
? ? ? ? 2.Promise.resolve()
? ? ? ? 返回一個fulfilled的Promise實例饰抒,或原始Promise實例肮砾。
? ? ? ? ? ? ? ? 參數(shù)為空,返回一個狀態(tài)為fulfilled的Promise實例
? ? ? ? ? ? ? ? 參數(shù)是一個跟Promise無關的值袋坑,同上仗处,不過fulfuilled響應函數(shù)會得到這個參數(shù)
? ? ? ? ? ? ? ? 參數(shù)為Promise實例,則返回該實例枣宫,不作任何修改婆誓。
? ? ? ? ? ? ? ? 參數(shù)為thenable,立刻執(zhí)行它的.then()? ??
? ? ? ? 3.Promise.reject()
? ? ? ? 返回一個rejected的Promise實例
? ? ? ? ? ? ? ? Promise.reject()不認thenable? ? ??
? ? ? ? 4.Promise.race()
? ? ? ? 類似Promise.all(),區(qū)別在于也颤,它有任意一個完成洋幻,就算完成。
? ? ? ? ?常見用法:
? ? ? ? ? ? ? ? 把異步操作和定時器放在一起翅娶,如果定時器按時觸發(fā)文留,就認為超時好唯,告知用戶。
9.現(xiàn)實中的Promise
? ? ? ? 1.把回調(diào)包裝成promise最為常見燥翅。它有兩個顯而易見的好處:
? ? ? ? ? ? ? ? 可讀性更好
? ? ? ? ? ? ? ? 返回的結果可以加入任何Promise隊列
? ? ? ? 2.把任何異步操作包裝成Promise
? ? ? ? ? ? ? ? 假設需求:
? ? ? ? ? ? ? ? ? ? ? ? 用戶點擊按鈕骑篙,彈出確認窗體
? ? ? ? ? ? ? ? ? ? ? ? 用戶確認和取消有不同的處理
? ? ? ? ? ? ? ? ? ? ? ? 樣式問題不能使用window.conform()
10.jQuery
? ? ? ? jQuery已經(jīng)實現(xiàn)了Promise。
11.兼容問題
如果需要在IE中使用Promise森书,有兩個選擇:
? ? ? ? 只想實現(xiàn)異步隊列:jQuery.defered
? ? ? ? 需要兼容所有平臺:Bluebird 或Promise polyfill
12.Fetch API
? ? ? ? 更強大靶端,也更友好。
? ? ? ? 直接返回一個Promise實例拄氯。? ?
13.async/await
? ? ES2017新增運算符躲查,新的語言元素。
? ? ? ? 賦予JavaScript以順序首發(fā)便攜異步腳本能力
? ? ? ? 既保留異步運算的無阻塞特性
????? ? ? ? ? ??
????? ? ?
? ??
? ??
? ??