在进行前端开发时，我们不可避免地会遇到各种错误。使用 Axios 进行 HTTP 请求时，同样需要对可能出现的错误进行处理，以便提升用户体验和应用稳定性。本章将详细介绍如何有效地使用 Axios 处理错误。
错误类型
Axios 中存在两种主要类型的错误：
- 网络错误：这些错误通常发生在请求无法到达服务器或服务器响应超时时。
- HTTP 错误：当服务器返回的状态码不在 2xx 范围内时，就会触发这种错误。
了解这两种错误的区别对于正确处理它们至关重要。
捕获错误
使用 .catch() 方法
.catch() 方法是处理 Axios 请求失败时最常用的方法。无论请求是否成功，你都可以通过 .then() 方法来处理成功的响应，而 .catch() 方法则专门用于捕获和处理错误。
axios.get('/user/12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.error('请求失败了:', error);
});使用 try-catch 结构
在更复杂的异步代码中，你可以使用 try-catch 结构来捕获 Axios 请求中的错误。这种方法可以让你更好地控制错误处理流程，并且可以与其他异步操作结合使用。
async function fetchUser() {
try {
const response = await axios.get('/user/12345');
console.log(response);
} catch (error) {
console.error('请求失败了:', error);
}
}自定义错误处理
创建自定义错误处理器
为了提高代码的可维护性和可读性，你可以创建一个自定义的错误处理器函数。这个函数可以接收错误对象作为参数，并根据错误类型执行不同的操作。
-- -------------------- ---- -------
-------- ------------------ -
-- ---------------- -
-- ------------------ --- ---
----------------------- -----------------------
---------------------- ---------------------
- ---- -- --------------- -
-- -------------
---------------------- ---------------
- ---- -
-- ------------
---------------------- ---------------
-
-
------------------------
-------------- ---------- -
----------------------
--
--------------------根据状态码处理错误
有时，你需要根据不同状态码来执行特定的错误处理逻辑。你可以通过检查 error.response.status 来实现这一点。
-- -------------------- ---- -------
-------- ----------------------- -
-- ---------------- -
------ ----------------------- -
---- ----
---------------------- ---------------------
------
---- ----
--------------------- ---------------------
------
---- ----
---------------------- ---------------------
------
---- ----
----------------------- ---------------------
------
--------
---------------------- ---------------------
-
- ---- -- --------------- -
---------------------- ---------------
- ---- -
---------------------- ---------------
-
-
------------------------
-------------- ---------- -
----------------------
--
-------------------------全局错误处理
使用 axios.interceptors
为了简化全局错误处理，你可以利用 Axios 的拦截器功能。拦截器允许你在请求发送之前或响应接收到之后添加自定义逻辑，包括错误处理。
-- -------------------- ---- -------
--------------------------------
-------- ---------- -
-- ---------
------ ---------
--
-------- ------- -
-- ---------
---------------------- -------
------ ----------------------
-
--
------------------------
-------------- ---------- -
----------------------
--
--------------- ------- -
---------------------- -------
---清理拦截器
当你不再需要某个拦截器时，可以通过调用 axios.interceptors.response.eject(id) 方法来删除它。
const myInterceptor = axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});
// 在适当的时候清理拦截器
axios.interceptors.response.eject(myInterceptor);通过本章的学习，你应该能够更好地理解和应用 Axios 的错误处理机制，从而构建出更加健壮、稳定的前端应用。