ES6 - Promise和Ajax （精华）
2019-01-10 本文已影响0人
饮杯梦回酒
导读：
- Promise实际是充当ajax获取后台数据后执行回调的异步执行顺序的一个媒介，客观来说就是避免ajax回调地狱（反复嵌套回调），不然代码不够直观。
例子：
- 模拟Ajax和Promise的结合使用(Promise主要用于异步执行顺序) ：
<!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">
/*
定义一个使用promise的ajax请求,模拟用户登录场景
*/
const ajaxPromise = obj => {
return new Promise((resolve, reject) => {
$.ajax({
type: obj.type,
url: obj.url,
data: obj.data,
success: res => {
resolve(res); // 请求成功则转成Promise对象并判断为resolve状态
},
error: err => {
reject(err.status); // 请求失败则转成Promise对象并判断为reject状态
}
})
})
}
/*
函数1：判断用户登陆成功
*/
let userLogin = () => {
// 第一次执行ajaxPromise
ajaxPromise({
type: 'get',
url: 'test.php',
data: { userName: 'Verin', userPwd: '123456'}
}).then(res => {
console.log('后台校验提交的数据并返回成功信息'); // 成功则二次ajax请求，取用户信息
getUserInfo(res);
}).catch(err => {
console.log('用户校验提交的数据失败，无法登陆');
})
}
/*
函数2：取出对应登录用户的信息
*/
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>
-
来张效果图 ：( 书主自己模拟了后台环境默认都是请求成功的哈 )
Result
总结：
- 刚开始接触 Promise 的伙伴可能有点晕头，书主也琢磨了好一会才想明白，故写此简书一篇，来个 Promise 流程总结：
1 .把 ajax 返回成功 / 失败的回调封装成一个 Promise 对象（同时判断 resolve / reject 状态）
2 .其对象根据传来的状态 resolve 则执行.then( res => {} // 实际在Promise.prototype上 )来执行ajax一层返回成功后的二层 ajax 请求，状态为 reject 的则执行对象的.catch( err => {} // 实际在Promise.prototype上 )，以此类推，实现异步请求的顺序执行
