19.ES6 Promise串行效果
2019-02-15 本文已影响0人
圆梦人生
ES6 Promise执行串行效果
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Promise 串行</title>
<script>
let num =1;
// Promise 串行效果
// 必须等到上个结果返回结果才执行下一个
// 如果中间一个执行失败，终止后续流程
let promiseUtil = (data)=>{
//
return new Promise((resolve, reject)=>{
// data为上次Promise传入的结果
console.log('data %o',data);
// 使用setTimeout 模拟ajax请求
setTimeout(()=>{
//
let sucessFlag = true;
// 模拟失败...
// if(num == 2){
// // 如果最后一个请求模拟失败
// sucessFlag = false;
// }
//
// num++
//
if(sucessFlag){
// 模拟成功
let result = {
sucesss: true,
message: '操作成功',
url: data.url,
data: {
name: (Math.random() * 100).toFixed()
}
}
// console.log(result);
// 返回成功结果
resolve(result)
}else{
// 模拟失败
reject({
sucesss: true,
message: '操作失败',
url: data.url
})
}
}, 2000)
})
}
// 串行效果
let p = new Promise((resolve, reject)=>{
console.log('开始串行 Promise...');
resolve({
url: 'http://www.baidu.com'
});
})
// 执行Promise
p.then(promiseUtil)
.then(promiseUtil)
.then(promiseUtil)
.then((data)=>{
console.log('请求成功');
console.log(data);
},(error)=>{
console.log('操作失败');
console.log(error);
});
</script>
</head>
<body></body>
</html>
