axios 异常抛出
在前端开发中，网络请求是非常常见的操作。而处理网络请求的库有很多，其中一款非常受欢迎的库是 axios。axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中发送 HTTP 请求。它具有简洁的 API 接口，支持并发请求、拦截请求和响应等功能。本文将介绍如何在 axios 中处理异常，并提供代码示例。
1.异常处理原则
在进行网络请求时，可能会遇到各种异常情况，如网络错误、服务器错误、超时等。良好的异常处理可以提高用户体验和代码的可维护性。在 axios 中，异常的处理遵循以下原则：
-
异常抛出：当请求发生错误时，axios 会抛出一个异常对象，开发者可以捕获并处理该异常。异常对象包含错误的详细信息，如错误码、错误描述等。
-
异常传递：异常会自动传递给 Promise 的 reject 函数，可以通过 catch 方法捕获并处理异常。
-
异常处理器：开发者可以使用自定义的异常处理器对异常进行统一处理，例如显示错误提示信息或记录日志等。
2.捕获异常的方式
在 axios 中，可以通过两种方式来捕获异常：使用 Promise 的 catch 方法或使用 async/await。
使用 Promise 的 catch 方法
在使用 axios 发送请求时，可以通过调用 then 方法来处理正常的响应，调用 catch 方法来处理异常情况。
axios.get('/api/user/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
使用 async/await
在支持 async/await 的环境中，可以使用 async 函数和 try/catch 语句来捕获异常。
async function getUser() {
try {
const response = await axios.get('/api/user/1');
console.log(response.data);
} catch (error) {
console.error(error);
}
}
getUser();
3.自定义异常处理器
除了使用 catch 方法或 try/catch 语句来捕获异常外，还可以通过自定义异常处理器来统一处理异常。可以通过 axios 的全局配置来设置自定义的异常处理器。
axios.defaults.handleError = function (error) {
console.error('An error occurred:', error);
};
axios.get('/api/user/1')
.then(response => {
console.log(response.data);
});
4.异常的类型
在 axios 中，异常对象包含了一些常见的错误类型，开发者可以根据这些类型来做出相应的处理。下面是一些常见的异常类型：
-
Network Error（网络错误）：当请求无法发送到服务器时，会抛出 Network Error 异常。
-
Timeout Error（超时错误）：当请求超过设置的超时时间时，会抛出 Timeout Error 异常。
-
Request aborted（请求中止）：当请求被手动中止时，会抛出 Request aborted 异常。
-
Server Error（服务器错误）：当服务器返回错误状态码（如 500）时，会抛出 Server Error 异常。
-
Other Errors（其他错误）：还有一些其他类型的错误，如请求被取消、无法解析响应等。
5.代码示例
为了更好地理解异常的处理，下面是一个完整的代码示例：
async function getUser() {
try {
const response = await axios.get('/api/user/1');
console.log(response.data);
} catch (error) {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else if (axios.isTimeout(error)) {
console.log('Request timed out:', error.message);
} else if (axios.isServerError(error)) {
console.log('Server error:', error.message);
} else {
console.error('An error occurred:', error);
}
}
}
getUser();
6.序列图
下面是一个使用序列图表示的异常处理流程：
sequenceDiagram
participant Client
participant Server
Client->>Server: 发送请求
Server-->>Client: 返回响应
Client->>Server: 处理异常
Server-->>Client: 抛出异常
Client->>Client: 捕获异常
