導(dǎo)讀：
- Promise實(shí)際是充當(dāng)ajax獲取后臺(tái)數(shù)據(jù)后執(zhí)行回調(diào)的異步執(zhí)行順序的一個(gè)媒介，客觀來說就是避免ajax回調(diào)地獄（反復(fù)嵌套回調(diào)），不然代碼不夠直觀授药。
例子：
- 模擬Ajax和Promise的結(jié)合使用(Promise主要用于異步執(zhí)行順序) ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
/*
定義一個(gè)使用promise的ajax請(qǐng)求,模擬用戶登錄場(chǎng)景
*/
const ajaxPromise = obj => {
return new Promise((resolve, reject) => {
$.ajax({
type: obj.type,
url: obj.url,
data: obj.data,
success: res => {
resolve(res); // 請(qǐng)求成功則轉(zhuǎn)成Promise對(duì)象并判斷為resolve狀態(tài)
},
error: err => {
reject(err.status); // 請(qǐng)求失敗則轉(zhuǎn)成Promise對(duì)象并判斷為reject狀態(tài)
}
})
})
}
/*
函數(shù)1：判斷用戶登陸成功
*/
let userLogin = () => {
// 第一次執(zhí)行ajaxPromise
ajaxPromise({
type: 'get',
url: 'test.php',
data: { userName: 'Verin', userPwd: '123456'}
}).then(res => {
console.log('后臺(tái)校驗(yàn)提交的數(shù)據(jù)并返回成功信息'); // 成功則二次ajax請(qǐng)求，取用戶信息
getUserInfo(res);
}).catch(err => {
console.log('用戶校驗(yàn)提交的數(shù)據(jù)失敗沟饥，無法登陸');
})
}
/*
函數(shù)2：取出對(duì)應(yīng)登錄用戶的信息
*/
let getUserInfo = res => {
ajaxPromise({
type: 'get',
url: 'test2.php',
data: { status: 'success to finish getUserInfo!'}
}).then(res => {
console.log('獲取用戶信息：');
console.log(res);
}).catch(err => {
console.log('獲取用戶信息失敗' + err);
})
}
userLogin();
</script>
</body>
</html>
-
來張效果圖 ：( 書主自己模擬了后臺(tái)環(huán)境默認(rèn)都是請(qǐng)求成功的哈 )
Result
總結(jié)：
- 剛開始接觸 Promise 的伙伴可能有點(diǎn)暈頭，書主也琢磨了好一會(huì)才想明白，故寫此簡書一篇，來個(gè) Promise 流程總結(jié)：
1 .把 ajax 返回成功 / 失敗的回調(diào)封裝成一個(gè) Promise 對(duì)象（同時(shí)判斷 resolve / reject 狀態(tài)）
2 .其對(duì)象根據(jù)傳來的狀態(tài) resolve 則執(zhí)行.then( res => {} // 實(shí)際在Promise.prototype上 )來執(zhí)行ajax一層返回成功后的二層 ajax 請(qǐng)求版述，狀態(tài)為 reject 的則執(zhí)行對(duì)象的.catch( err => {} // 實(shí)際在Promise.prototype上 )梯澜，以此類推寞冯，實(shí)現(xiàn)異步請(qǐng)求的順序執(zhí)行
