通过.then()的第二个参数捕获异常

.then()方法接受两个参数：第一个是成功回调函数，第二个是失败回调函数。可以利用第二个参数来捕获异常。例如：

let promise = new Promise((resolve, reject) => {    reject('错误');});promise.then(() => {}, (error) => {    console.log(error); // '错误'});

通过.catch()捕获异常

.catch()方法是一个更简便的方式来捕获所有异常。它内部会调用 Promise.prototype.then(undefined, onRejected)，因此可以直接用于处理失败情况：

let promise = new Promise((resolve, reject) => {    reject('错误');});promise.catch((error) => {    console.log(error); // '错误'});

通过链式编写了解两者的差异

有时候项目会采用链式编写方式，可以通过实验发现，.then()的第二个参数和.catch()存在优先级问题。由于.then()的第二个参数会返回一个新 Promise，后续的.catch()可能不会捕获前面的错误。例如：

let promise = new Promise((resolve, reject) => {    reject('失败');});promise.then(() => {}, (err) => {}).catch((err) => {    console.log(err); // 这里不会执行});

相反，如果替换.then()的第二个参数为一个返回值，则后面的.catch()可能无法捕获早期错误：

let promise = new Promise((resolve, reject) => {    reject('失败');});promise.then(() => {}, (err1) => {    return promise1; // 注意：假设 promise1 是关于同一 Promise}).then(() => {}).catch((err2) => {    console.log(err2); // ReferenceError: promise1 未定义});

由此可见，.catch()适用于整个链式结构的错误捕获，而 .then()的第二个参数仅捕获前一个 Promise 的结果。

错误传播的优先级规则

如果你在.then()的第二个参数中返回一个新的 Promise 或直接调用 .catch()，错误传播的规则会发生改变。例如：

let promise = new Promise((resolve, reject) => {    reject('失败');});promise.then(() => {}, (err1) => {    return new Promise((resolve, reject) => {        reject('后续错误');    });}).then(() => {}, (err2) => {    console.log(err2); // ReferenceError: promise1 未定义});

这里的瓶颈在于，.then()的链式结构会导致错误被传递到后续链路，而如果我们使用.catch()，则可以捕获整个链路上的所有错误：

let promise = new Promise((resolve, reject) => {    reject('失败');});promise.then(() => {}, (err1) => {}).catch((err2) => {    console.log(err2); // '失败'});

避免迷失：正确使用 catch 的方法

它被建议在多层次的 Promise 链式结构中使用.catch()来捕获所有错误，而不是在每一个.then()中都手动添加一个失败回调。这使得代码更加简洁且易于阅读：

let promise = new Promise((resolve, reject) => {    reject('失败');});promise.then(() => {}).catch((err) => {    console.log('失败'); // 这里会执行});

这样的结构会更关注程序的主要逻辑，而不是繁琐的错误处理逻辑。

Promise.value穿透（Promises 的值穿透）

值穿透是指在 Promise 链式执行中，将非函数值通过链式传递下去。例如：

Promise.resolve(1).then(2).then(() => {    console.log(1);});

在这个例子中，2 会被作为参数传递给链式的下一个.then()，但不会被阻止，因为它不是一个函数。这类行为可以帮助简化代码，但可能会引发一些潜在的问题。

例如：

Promise.resolve(1).then(2).then(() => {    console.log(2);});

这里，2 会被直接传递给 then 的第一个参数，因为它不是一个函数，导致将 2 作为状态处理。为了ulse）的错误传播方式。

在外部捕捉 async 函数的错误

async 函数返回的是一个 Promise，所有的错误都会被Promise 接收，然后可以在外部通过 catch 来捕获：

async function test() {    await new Promise((resolve, reject) => {        reject('错误');    });}test().catch((data) => {    console.log(data); // '错误'});

在 async 函数内部捕捉错误

如果需要在 async 函数内部处理错误，可以使用 try...catch 实现：

async function test() {    try {        await new Promise((resolve, reject) => {            reject('错误');        });    } catch (error) {        console.log('错误发生在内部', error);    }}test();

await 后接 catch 捕捉错误

await 错误同样可以被传递到 catch 中：

async function test() {    await new Promise((resolve, reject) => {        reject('错误');    }).catch((data) => {        console.log('错误From await', data);    });    await new Promise((resolve, reject) => {        reject('错误1');    }).catch((data) => {        console.log('错误从await的另一个错误1', data);    });    await new Promise((resolve, reject) => {        reject('错误2');    }).catch((data) => {        console.log('错误从 await，错误2’, data);    });}test();

优化代码：封装错误处理

有时候，在多个地方重复操作相同的错误处理逻辑，可以封装到一个函数中：

const promiseValue = (promise) => {    return promise.then((data) => [null, data]).catch((err) => [err]);};async function test() {    let [err, data] = await promiseValue(new Promise((resolve, reject) => {        reject('错误');    }));    if (err) {        console.log('错误发生在这里');    }    let [err1, data1] = await promiseValue(new Promise((resolve, reject) => {        reject('错误1');    }));    if (err1) {        console.log('错误1发生在这里');    }    let [err2, data2] = await promiseValue(new Promise((resolve, reject) => {        reject('错误2');    }));    if (err2) {        console.log('错误2发生在这里');    }}test();

这种封装不仅提高了代码的可读性，还减少了重复代码。