es6 ajax php,ES6 - Promise和Ajax （精华）

导读：

Promise实际是充当ajax获取后台数据后执行回调的异步执行顺序的一个媒介，客观来说就是避免ajax回调地狱(反复嵌套回调)，不然代码不够直观。

例子：

模拟Ajax和Promise的结合使用(Promise主要用于异步执行顺序) ：

Document

/*

定义一个使用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();

来张效果图 ：( 书主自己模拟了后台环境默认都是请求成功的哈 )

Result

总结：

刚开始接触 Promise 的伙伴可能有点晕头，书主也琢磨了好一会才想明白，故写此简书一篇，来个 Promise 流程总结：

1 .把 ajax 返回成功 / 失败的回调封装成一个 Promise 对象(同时判断 resolve / reject 状态)

2 .其对象根据传来的状态 resolve 则执行.then( res => {} // 实际在Promise.prototype上 )来执行ajax一层返回成功后的二层 ajax 请求，状态为 reject 的则执行对象的.catch( err => {} // 实际在Promise.prototype上 )，以此类推，实现异步请求的顺序执行