Promise的串联
一、Promise的串联
当后续的Promise需要用到之前的Promise的处理结果时,需要Promise的串联
Promise对象中,无论是then方法还是catch方法,它们都具有返回值,返回的是一个全新的Promise对象,它的状态满足下面的规则:
- 如果当前的Promise是未决的,得到的新的Promise是挂起状态
- 如果当前的Promise是已决的,会运行响应的后续处理函数,并将后续处理函数的结果(返回值)作为resolved状态数据,应用到新的Promise中;如果后续处理函数发生错误,则把返回值作为rejected状态数据,应用到新的Promise中。
后续的Promise一定会等到前面的Promise有了后续处理结果后,才会变成已决状态
const pro1 = new Promise((resolve, reject) => {
resolve(123);
});//123给pro1,就已决
const pro2 = pro1.then(result => result * 2 );//收到123*2返回,就已决
pro2.then(result =>console.log(result));//输出246,已决
const pro1 = new Promise((resolve, reject) => {
throw 1;//推向rejected
});
const pro2 = pro1.then(result => {//这里pro2先为挂起,等pro1.then异步执行了,就对应结果推向已决
return result * 2
}, err => {
return err * 3;//执行1*3,推向已决
});
pro2.then(result =>console.log(result));//3
const pro1 = new Promise((resolve, reject) => {
throw 1;
});
const pro2 = pro1.then(result => {
return result * 2
}, err => {
return err * 3;//收到1 *3
});
pro1.catch(err => {
return err * 2;
});//这里是新的pro了,不用在意它
pro2.then(result => console.log(result * 2), err => console.log(err * 3));//收到3 *2
如果前面的Promise的后续处理,返回的是一个Promise,则返回的新的Promise状态和后续处理返回的Promise状态保持一致。
const pro1 = new Promise((resolve, reject) => {
resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
resolve(2);
});
const pro3 = pro1.then(result => {
return pro2;
});
console.log(pro3);//异步,所以console pro3时,还没拿到pro1.then的执行结果
const pro1 = new Promise((resolve, reject) => {
resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
resolve(2);
});
const pro3 = pro1.then(result => {
return pro2;//返回pro2和pro3是一致的,所以为2
});
pro3.then(result => {
console.log(result);//2
});
const pro1 = new Promise((resolve, reject) => {
resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve(2);
},3000)
});
const pro3 = pro1.then(result => {
console.log("结果出来了,得到的是一个Promise");
return pro2;//pro1执行推向已决,但是pro2还在定时,所以pro3需要在3s后执行
});
pro3.then(result => {
console.log(result);
});
简化
const pro1 = new Promise((resolve, reject) => {
resolve(1);
});
const pro2 = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve(2);
})
});
pro1.then(result => {
console.log("结果出来了,得到的是一个Promise")
return pro2;
}).then(result => {
console.log(result)//得到2
}).then(result => {
console.log(result)//前面没有返回值了,所以undefined
});
二、问题优化
最先我们提到的两个问题,一个通过查询数据找到另个数据和表白问题。
const pro = ajax({//已经进行了封装,可以直接返回数据。
url: "./data/students.json"
});
pro.then(resp => {
for (let i = 0; i < resp.length; i++) {
if (resp[i].name === "李华") {
return resp[i].classId; //将班级id返回
}
}
}).then(cid => {
return ajax({
url: "./data/classes.json?cid=" + cid //继续查询
}).then(cls => {
for (let i = 0; i < cls.length; i++) {
if (cls[i].id === cid) {
return cls[i].teacherId;//返回老师id
}
}
})
}).then(tid => {
return ajax({
url: "./data/teachers.json"
}).then(ts => {
for (let i = 0; i < ts.length; i++) {
if (ts[i].id === tid) {
return ts[i];//找到目标老师
}
}
})
}).then(teacher => {
console.log(teacher);
});
function biaobai(god) {
return new Promise(resolve => {
console.log(`我向${god}发出了表白短信`);
setTimeout(() => {
if (Math.random() < 0.3) {
//女神同意拉
resolve(true)
} else {
//拒绝
resolve(false);
}
}, 500);
})
};
const gods = ["女神1", "女神2", "女神3", "女神4", "女神5"];
let pro;
for (let i = 0; i < gods.length; i++) {
if (i === 0) {
pro = biaobai(gods[i]);
}
pro = pro.then(resp => {
if (resp === undefined) {
return;//如果某一步成功,则不会继续向后表白
} else if (resp) {
console.log(`${gods[i]}同意了`)
return;
} else {
console.log(`${gods[i]}拒绝了`)
if (i < gods.length - 1) {
return biaobai(gods[i + 1]);
}
}
})
};