Promise的链式调用

链式调用

1. then 方法必定会返回一个新的 Promise

   可理解为后续处理也是一个任务

2. 新任务的状态取决于后续处理：

   • 若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据。

   • 若有后续处理但还未执行，新任务挂起。

   • 若后续处理执行了，则根据后续处理的情况确定新任务的状态。

     • 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值。
     • 后续处理执行有错，新任务的状态为失败，数据为异常对象。
     • 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致。

由于链式任务的存在，异步代码拥有了更强的表达力

// 常见任务处理代码

/*
 * 任务成功后，执行处理1，失败则执行处理2
 */
pro.then(处理1).catch(处理2)

/*
 * 任务成功后，依次执行处理1、处理2
 */
pro.then(处理1).then(处理2)

/*
 * 任务成功后，依次执行处理1、处理2，若任务失败或前面的处理有错，执行处理3
 */
pro.then(处理1).then(处理2).catch(处理3)

练习题

// 下面代码的输出结果是什么
const pro1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 1000);
});

const pro2 = pro1.then((data) => {
    console.log(data);
    return data + 1;
});

const pro3 = pro2.then((data) => {
    console.log(data);
});

console.log(pro1, pro2, pro3);

setTimeout(() => {
    console.log(pro1, pro2, pro3);
}, 2000);

// 下面代码的输出结果是什么
new Promise((resolve, reject) => {
    resolve(1);
})
    .then((res) => {
    console.log(res);
    return 2;
})
    .catch((err) => {
    return 3;
})
    .then((res) => {
    console.log(res);
});

// 下面代码的输出结果是什么
new Promise((resolve, reject) => {
    resolve();
})
    .then((res) => {
    console.log(res.toString());
    return 2;
})
    .catch((err) => {
    return 3;
})
    .then((res) => {
    console.log(res);
});

// 下面代码的输出结果是什么
new Promise((resolve, reject) => {
    throw new Error(1);
})
    .then((res) => {
    console.log(res);
    return new Error('2');
})
    .catch((err) => {
    throw err;
    return 3;
})
    .then((res) => {
    console.log(res);
});

// 下面的代码输出什么
const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject();
    }, 1000);
});
const promise2 = promise1.catch(() => {
    return 2;
});

console.log('promise1', promise1);
console.log('promise2', promise2);

setTimeout(() => {
    console.log('promise1', promise1);
    console.log('promise2', promise2);
}, 2000);
promise2', promise2);

setTimeout(() => {
    console.log('promise1', promise1);
    console.log('promise2', promise2);
}, 2000);