实现 axios 错误捕获
介绍
在开发过程中，经常会遇到处理网络请求错误的情况。为了更好地处理这些错误，我们可以使用 axios，一个常用的 JavaScript HTTP 客户端库。本文将向你介绍如何在使用 axios 过程中实现错误捕获的功能。
错误捕获流程
以下是实现 axios 错误捕获的流程：
| 步骤 | 描述 |
|---|---|
| 第一步 | 创建一个 axios 实例 |
| 第二步 | 设置全局错误拦截器 |
| 第三步 | 发送网络请求 |
| 第四步 | 处理请求结果 |
| 第五步 | 捕获并处理错误 |
下面我们将逐步介绍每一步的具体操作。
第一步：创建 axios 实例
在使用 axios 发送网络请求之前，我们需要先创建一个 axios 实例。使用 axios.create() 方法可以创建一个新的实例，并对其进行相关配置。
// 引入 axios
import axios from 'axios';
// 创建 axios 实例
const instance = axios.create({
baseURL: ' // 设置请求的基础 URL
timeout: 5000, // 设置请求超时时间
headers: {
'Content-Type': 'application/json', // 设置请求头的 Content-Type
},
});
这段代码创建了一个 axios 实例，并设置了一些常用的配置项，如基础 URL、请求超时时间和请求头。
第二步：设置全局错误拦截器
全局错误拦截器可以帮助我们在发生错误时捕获并处理错误。我们可以使用 axios 的 interceptors.response.use() 方法来设置全局错误拦截器。
// 设置全局错误拦截器
instance.interceptors.response.use(
response => {
// 请求成功时的处理逻辑
return response.data;
},
error => {
// 请求失败时的处理逻辑
return Promise.reject(error);
}
);
以上代码设置了一个全局错误拦截器，在请求成功时返回响应数据，请求失败时返回一个被拒绝的 Promise，以便后续处理错误。
第三步：发送网络请求
使用 axios 实例发送网络请求非常简单。只需要调用实例的相应方法，如 instance.get()、instance.post() 等，即可发送对应的请求。
// 发送 GET 请求
instance.get('/api/users')
.then(response => {
// 处理请求结果
console.log(response);
})
.catch(error => {
// 捕获并处理错误
console.error(error);
});
// 发送 POST 请求
instance.post('/api/users', { name: 'John Doe' })
.then(response => {
// 处理请求结果
console.log(response);
})
.catch(error => {
// 捕获并处理错误
console.error(error);
});
以上代码分别发送了 GET 和 POST 请求，并使用了 Promise 的 then() 和 catch() 方法来处理请求结果和错误。
第四步：处理请求结果
在收到网络请求的响应后，我们可以根据实际需求进行相应的处理。这可能包括解析数据、更新界面等操作。
instance.get('/api/users')
.then(response => {
const data = response.data;
// 处理数据，如解析、过滤等
console.log(data);
})
.catch(error => {
console.error(error);
});
在这个例子中，我们通过访问 response.data 获取到了响应的数据，并进行了相应的处理。
第五步：捕获并处理错误
在全局错误拦截器中，我们已经设置了请求失败时返回一个被拒绝的 Promise。因此，我们可以在 catch() 方法中捕获这些错误，并进行相应的处理。
instance.get('/api/users')
.then(response => {
console.log(response);
})
.catch(error => {
// 捕获并处理错误
console.error(error);
});
在这个例子中，如果网络请求失败，我们将会在控制台输出错误信息。
示例代码
import axios from 'axios';
const instance = axios.create({
baseURL: '
timeout: 5000,
headers: {
'Content-Type': 'application/json',
},
});
