Concatenation of promises
When the subsequent Promise needs to use the processing result of the previous Promise, the serialization of the Promise is required
In the Promise object, whether it is the then method or the catch method, they all have a return value. What is returned is a brand new Promise object whose state satisfies the following rules:
- If the current Promise is pending, the new Promise obtained is pending
- If the current Promise is resolved, the subsequent processing function of the response will be run, and the result (return value) of the subsequent processing function will be used as the resolved state data and applied to the new Promise; if an error occurs in the subsequent processing function, it will return The value is used as rejected state data and applied to the new Promise.
Subsequent Promises must wait until the previous Promise has a subsequent processing result before it becomes the resolved state
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))
- Output 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
The first function is run when pro2.then, because there is no error in the subsequent processing of 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 throws an error, and the subsequent processing of pro1 also throws an error, then the subsequent processing of pro2 is rejected, and the second function is run.
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
If the subsequent processing of the previous Promise returns a Promise, the new Promise state returned is consistent with the Promise state returned by the subsequent processing.
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
})
- First output'xxxx', etc. 3s output 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)
})
- First output: the result is out, and the result is a Promise
- Wait 3s to output 2
- Since the second then returns undefined, undefined will be output immediately after 3s output 2.
//获取李华所在班级的老师的信息
//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);
})