day8 Promise
引入
回調(diào)地獄
回調(diào)函數(shù)中 嵌套 其他回調(diào)函數(shù) 例子: 多個文件依次讀取
解決方法: 使用ES6 中的 Promise, 來解決 回調(diào)地獄的問題
基本概念
- Promise 是一個 構(gòu)造函數(shù), 既然是構(gòu)造函數(shù) 就可以new Promise() 得到一個 Promise 的實例
- 在 Promise 上, 有兩個函數(shù) resolve(成功后的回調(diào)) 和 reject(失敗后的回調(diào))
- 在 Promise 構(gòu)造函數(shù) Prototype 屬性上, 有.then() 方法
- Promise 表示一個 異步操作, 每當我們new 一個Promise 的實例, 就表示一個異步操作
- 異步操作有兩種狀態(tài)
- 狀態(tài)1: 異步執(zhí)行成功, 需要調(diào)用 resolve 返回結(jié)果
- 狀態(tài)2: 異步執(zhí)行失敗, 需要調(diào)用 reject 返回結(jié)果
- 由于異步操作無法使用 return 把操作結(jié)果返回, 這時候, 只能使用回調(diào)函數(shù) 來把結(jié)果(成功/失敗)返回.
- 我們可以在 new 出來的 Promise 實例上, 調(diào)用 .then()方法, **[預(yù)先] **為這個 Promise異步操作, 指定 成功 和 失敗 回調(diào)函數(shù).
形式上 和 具體的 異步操作的區(qū)別
形式上 的異步操作: 我們知道它是一個異步操作, 但是具體做什么事情, 目前還不清楚
var promise = new Promise()
具體的 的異步操作: 使用 function 指定一個具體的 異步操作
var promise = new Promise(function(){
// 這個 fun 內(nèi)部寫的就是具體的異步操作
})
Promise實例 只要被創(chuàng)建 就會立即執(zhí)行里面的異步方法
- 每當 new 一個 Promise 實例的時候, 就會執(zhí)行 異步操作中的代碼
- 也就是說, new的時候, 除了能夠得到一個 Promose 實例之外, 還會立即調(diào)用 我們傳遞的 function, 并執(zhí)行function 中的 異步操作代碼
通過 .then() 指定成功 和 失敗的回調(diào)
const p = new Promise(function(res, rej){
// 成功返回res 失敗返回rej
res(data)
rej(err)
})
p.then(function(data){
console.log(data)
},function(err){
console.log(err)
})
注意: 通過.then 指定回調(diào)函數(shù)的時候, 成功的回調(diào) 必須傳, 失敗的回調(diào) 可以省略不傳
Promise 正確使用方式
image
需求: 依次讀取文件1 文件2 文件3
捕獲異常的兩種方式
1.Promise 執(zhí)行失敗, 但是不影響后續(xù), 此時, 我們可以單獨為 每個Promise, 通過 .then 指定一下失敗回調(diào)
image
2.和上面需求剛好相反, Promise 執(zhí)行失敗,后續(xù)直接終止, 可以使用 .catch() 指定回調(diào)函數(shù) 捕獲錯誤
作用: 如果執(zhí)行過程中, 有任意一步失敗, 就會立即中終止所有 Promise的執(zhí)行, 并馬上進入.catch() 中, 拋出異常
.catch(err => console.log(err.message))
Jquery 中Ajax使用Promise指定成功回調(diào)函數(shù)
$.ajax({
url: '/path/to/file',
type: 'GET',
dataType: 'xml/html/script/json/jsonp',
data: {param1: 'value1'},
})
.then(function(data){
console.log(data)
})
