Promise 中的.then 和.catch 的异常处理技巧
Promise 是 JavaScript 中常用的异步编程方法，它非常适用于在 Web 应用中处理大量的异步请求，但是在实际的开发中，我们常常会遇到一些意外情况，例如网络不稳定、后台服务无响应等等，这些意外情况如果不正确地处理可能会导致应用程序失效，从而影响用户的使用体验。在本文中，我们将会详细地介绍 Promise 中的.then 和.catch 的异常处理技巧，帮助读者更好地了解 Promise 的工作原理以及如何正确处理异常情况。
- then 和 catch 方法的基本使用
在基本的 Promise 使用中，我们通常使用.then 方法来获取异步操作之后的结果：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
// 异步操作
});
promise.then(result => {
// 处理异步操作之后的结果
}).catch(error => {
// 处理异步操作中的异常
});在.then 方法中，我们会接受到异步操作之后的结果，而在.catch 方法中，我们会接受到异步操作中的异常信息。这种基本的使用非常简单，但是在实际的应用中，我们需要根据不同的异常情况采取不同的处理方式。下面将分别介绍在.then 和.catch 方法中，应该如何正确处理异常情况。
- 在 then 方法中处理异常
在.then 方法中，如果出现了错误，我们一般会通过返回一个新的 Promise 对象，并手动调用.reject 方法来抛出一个异常：
fetch('https://example.com').then(response => {
return response.json();
}).then(data => {
// 处理 data
}).catch(err => {
console.error(err);
});在上述代码中，如果在获取数据时发生了网络请求错误，第一个.then 方法中返回的 Promise 对象就会被标记为 rejected 状态，导致整个 Promise 链路被中断。在这种情况下，我们需要在.catch 方法中捕获这个异常，并根据具体的情况选择撤销正在进行的操作、尝试重新执行等等，从而避免应用程序失效。
- 在 catch 方法中处理异常
在.catch 方法中处理异常的方法非常简单，它只需要接收一个 Promise 对象的错误信息即可。但是，我们应该要注意，在 Promise 链中的异常往往会在.catch 方法中相互覆盖，从而导致我们无法正确判断是哪一个异常造成了错误。为了避免这种情况的发生，我们可以使用 Promise.finally 方法，来做一些额外的异常处理：
// javascriptcn.com 代码示例
fetch('https://example.com').then(response => {
return response.json();
}).then(data => {
// 处理 data
}).catch(err => {
console.error(err);
}).finally(() => {
// 在这里做一些额外的异常处理
});在使用 Promise.finally 方法的情况下，无论 Promise 链是否正常完成，都会在最后执行.finally 方法中的内容，因此我们可以在这里做一些额外的异常处理工作，例如释放资源、记录日志等等。
- 实例代码
最后，本文还提供一份实例代码，帮助读者更好地理解 Promise 中的异常处理技巧：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
fetch('https://example.com').then(response => {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
}).then(data => {
console.log(data);
resolve(data);
}).catch(error => {
console.error(error);
reject(error);
}).finally(() => {
console.log('Finished fetching data');
});
});
promise.then(result => {
console.log(result);
}).catch(error => {
console.error(error);
});在上述代码中，我们首先新建了一个 Promise 对象，在 Promise 对象的构造方法中，我们使用 fetch 函数获取数据，并在.then 方法中处理数据。在这个过程中，如果网络请求出现异常，我们就会进入.catch 方法中，并在.finally 方法中输出“Finished fetching data”的信息。在我们使用.then 方法获取数据之后，如果在处理数据时出现了错误，我们就会进入.catch 方法，这样在代码的不同区域中做不同的异常处理工作，避免了异常信息互相干扰，提高了代码的可读性和可维护性。
总结
本文介绍了 Promise 中的.then 和.catch 的异常处理技巧，并通过实例代码详细地演示了这些技巧的正确使用方法。在实际的开发中，我们需要根据实际情况灵活运用这些技巧，避免异常信息互相干扰，从而提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652df9037d4982a6ebf0f815