promise的串联
当后续的Promise需要用到之前的Promise的处理结果时，需要Promise的串联
Promise对象中，无论是then方法还是catch方法，它们都具有返回值，返回的是一个全新的Promise对象，它的状态满足下面的规则：
- 如果当前的Promise是未决的，得到的新的Promise是挂起状态
- 如果当前的Promise是已决的，会运行响应的后续处理函数，并将后续处理函数的结果（返回值）作为resolved状态数据，应用到新的Promise中；如果后续处理函数发生错误，则把返回值作为rejected状态数据，应用到新的Promise中。
后续的Promise一定会等到前面的Promise有了后续处理结果后，才会变成已决状态
const pro1 = new Promise((resolve, reject) => {
resolve(1)
})
const pro2 = pro1.then(result => {
return result * 2
});
pro2.then(result => console.log(result * 2), err => console.log(err * 3))
- 输出 4
const pro1 = new Promise((resolve, reject) => {
throw 1;
})
const pro2 = pro1.then(result => {
return result * 2
}, err => {
return err * 3; // 3
});
//pro2类型：Promise对象
//pro2的状态：
pro2.then(result => console.log(result * 2), err => console.log(err * 3))
//输出：6
pro2.then的时候运行第一个函数，因为pro1的后续处理没有错误。
const pro1 = new Promise((resolve, reject) => {
throw 1;
})
const pro2 = pro1.then(result => {
return result * 2
}, err => {
throw err; // 1
});
pro2.then(result => console.log(result * 2), err => console.log(err * 3))
// 输出3
- pro抛出了一个错误，pro1的后续处理也抛出了一个错误，那么pro2的后续处理就是rejected，运行第二函数。
const pro1 = new Promise((resolve, reject) => {
throw 1;
})
const pro2 = pro1.then(result => {
return result * 2
}, err => {
return err * 3; // 3
});
//返回的又是一个新的promise 没有pro2什么事
pro1.catch(err => {
return err * 2;
})
//pro1后续处理正常进行，没有抛出错误。所以这里运行第一个函数。
pro2.then(result => console.log(result * 2), err => console.log(err * 3))
//输出：6
如果前面的Promise的后续处理，返回的是一个Promise，则返回的新的Promise状态和后续处理返回的Promise状态保持一致。
const pro1 = new Promise((resolve,reject)=>{
resolve(1);
})
const pro2 = new Promise((resolve,reject)=>{
resolve(2);
})
const pro3 = pro1.then(data=>{
return pro2;
});
pro3.then(data=>{
console.log(data); // 2
})
const pro1 = new Promise((resolve,reject)=>{
resolve(1);
})
const pro2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(2);
},3000)
})
const pro3 = pro1.then(data=>{
console.log('xxxx')
return pro2;
});
pro3.then(data=>{
console.log(data); // 等3s输出2
})
- 先输出 ‘xxxx’ 等3s输出2
const pro1 = new Promise((resolve, reject) => {
resolve(1);
})
const pro2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 3000);
})
pro1.then(result => {
console.log("结果出来了，得到的是一个Promise")
return pro2;
}).then(result => {
console.log(result)
}).then(result => {
console.log(result)
})
- 先输出：结果出来了，得到的是一个Promise
- 等3s输出2
- 由于第二个then返回的undefined，所以等3s输出2后马上输出undefined。
//获取李华所在班级的老师的信息
//1. 获取李华的班级id Promise
//2. 根据班级id获取李华所在班级的老师id Promise
//3. 根据老师的id查询老师信息 Promise
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;
}
}
})
}).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);
})