約束の連結
後続のPromiseが前のPromiseの処理結果を使用する必要がある場合、Promiseのシリアル化が必要です。
Promiseオブジェクトでは、thenメソッドであろうとcatchメソッドであろうと、すべて戻り値があります。返されるのは、状態が次のルールを満たす真新しいPromiseオブジェクトです。
- 現在のプロミスが保留中の場合、取得した新しいプロミスは保留中です
- 現在のPromiseが解決されると、応答の後続の処理関数が実行され、後続の処理関数の結果（戻り値）が解決された状態データとして新しいPromiseに適用されます。後続のエラーが発生した場合処理関数、戻り値値は拒否された状態データとして使用され、新しい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
pro1の後続の処理でエラーが発生しないため、最初の関数はpro2.thenのときに実行されます。
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の後続の処理は拒否され、2番目の関数が実行されます。
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」など。3秒出力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です
- 3秒待って2を出力します
- 2番目はundefinedを返すため、undefinedは3s出力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);
})