Promise 链式调用
::quyin:angry::
第一种
直接在第一个Promise 对象的.then
return 下一个要使用.then
的Promise 对象
let step1 =(resolve, reject)=> {
console.log('看天气 要不要出去买菜')
var flag = prompt('请输入今天的天气')
if (flag == '晴') {
resolve('我就去买菜做饭')
} else {
reject('天气不好 不想动')
}
}
let step2 = (resolve, reject)=> {
console.log('买菜完成')
var flag = prompt('确认家里有没有煤气啊')
if (flag == '有') {
resolve('我就去洗菜做饭')
} else {
reject('那我去冲煤气')
}
}
let step3 = (resolve, reject)=> {
console.log('做饭完成')
var flag = prompt('我做的饭好吃吗?嘻嘻')
if (flag == '好吃') {
resolve('味道好 明天你继续做饭')
} else {
reject(' 不吃了 给我去跪键盘 ')
}
}
let step4 = (resolve, reject) => {
console.log('吃饭完成')
var flag = prompt('今天该谁洗碗?')
if (flag=='我') {
resolve('表现不错 ')
} else {
reject('明天没有零花钱 ')
}
}
let p= new Promise(step1).then(res=>{
console.log(res)
return new Promise(step2)
}).then(res=>{
console.log(res)
return new Promise(step3)
},err=>{
console.log(err)
}).then(res3 =>{
console.log(res3)
return new Promise(step4)
},
err3 => console.log(err3))
.then(res4=>{
console.log(res4)
},err=>console.log(err))
效果图
第二种(带参数的解决异步回调地狱)
let memeda1 =()=>{
console.log('这是第一层');
return new Promise((res,rej)=>{
let Tip = prompt('输入memeda');//这里默认memeda
if(Tip=='memeda'){//如果Tip不为空
res(Tip);//成功返回Tip
}else{
rej('第一层失败标识');
}
})
}
let memeda2 =(data)=>{
console.log('我是第二层 这是第一层你输入的数据:'+data);
return new Promise((res,rej)=>{
let Tip = prompt('随便heheda');//默认heheda
if(Tip=='heheda'){//如果Tip不为空
res(Tip);
}else{
rej('第二层失败标识');
}
})
}
let memeda3 =(data)=>{
console.log('我是第三层 这是第二层你输入的数据:'+data);
return new Promise((res,rej)=>{
res('第三层成功标识');
rej('第三层失败标识');
})
}
//链式调用
memeda1().then(res=>{
console.log('第一次拿到的值'+res);
return memeda2(res)//将第一次输入的值传过去 return整个memeda2以便下次.then
})
.then(res2=>{
console.log('第二次拿到的值'+res2);
return memeda3(res2)//将第二次输入的值传过去 return整个memeda3以便下次.then
})
.then(res3=>console.log(res3),res3=>console.log('第三次失败了?'))
效果图
很好