构建现代 web 应用程序时，处理 api 调用及其响应是开发的关键部分。 axios 是一个流行的 javascript 库，它简化了 http 请求的过程，但它还具有诸如拦截器之类的内置功能，允许开发人员以更简化、更高效的方式管理响应和错误。
在本文中，我们将重点介绍如何使用 axios 拦截器有效地处理 api 错误响应，从而使您能够在整个应用程序中标准化错误处理。
什么是 axios？
axios 是一个基于 promise 的 javascript http 客户端，支持使用 async/await 语法向 api 发出请求。它很受欢迎，因为它使用简单，并且可以通过拦截器轻松扩展其功能。
axios 基础示例：
import axios from 'axios';
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('error fetching data:', error);
});
虽然此示例演示了如何使用 .then 和 .catch 处理请求和错误，但当您需要管理多个 api 请求时，使用拦截器可以使您的代码更加高效。
什么是 axios 拦截器？
axios 拦截器 是允许您在 .then 或 .catch 处理请求和响应之前拦截和处理请求和响应的函数。当您需要将通用配置应用于所有请求或以统一的方式处理错误响应时，这特别有用。
拦截器主要有两种类型：
- 请求拦截器：用于在发送请求之前修改或添加请求头、令牌或其他配置。
- 响应拦截器：用于全局处理响应或错误，包括在必要时记录或重试请求。
为什么使用响应拦截器？
处理多个 api 端点时，每个端点可能返回不同类型的错误消息或状态代码。如果没有拦截器，您将需要处理每个单独的 api 调用的错误，这可能会导致重复且难以维护的代码。
使用响应拦截器，您可以在一个位置管理所有错误响应，确保在整个应用程序中采用一致的方法处理错误。
设置 axios 响应拦截器
1.安装axios
首先，确保您的项目中安装了 axios：
npm install axios
2.创建axios实例
要设置拦截器，最好创建一个可以在整个应用程序中重用的 axios 实例。这有助于标准化您的请求和响应处理。
import axios from 'axios';
const apiclient = axios.create({
baseurl: 'https://api.example.com', // replace with your api base url
headers: {
'content-type': 'application/json',
accept: 'application/json',
},
});
3.添加响应拦截器
您可以添加响应拦截器，以在错误到达各个 api 调用中的 .then 或 .catch 块之前捕获并处理错误。
apiclient.interceptors.response.use(
(response) => {
// if the response is successful (status code 2xx), return the response data
return response;
},
(error) => {
// handle errors globally
if (error.response) {
// server responded with a status code out of 2xx range
const statuscode = error.response.status;
const errormessage = error.response.data.message || 'an error occurred';
// handle different status codes accordingly
if (statuscode === 401) {
// handle unauthorized error, for example by redirecting to login
console.error('unauthorized access - redirecting to login');
} else if (statuscode === 500) {
// handle server errors
console.error('server error - try again later');
} else {
// handle other types of errors
console.error(`error ${statuscode}: ${errormessage}`);
}
} else if (error.request) {
// no response received (network error, timeout, etc.)
console.error('network error - check your internet connection');
} else {
// something else happened during the request
console.error('request error:', error.message);
}
// optionally, return a rejected promise to ensure `.catch` is triggered in individual requests
return promise.reject(error);
}
);
4. 调用api
拦截器就位后，您现在可以使用 apiclient 进行 api 调用。如果发生错误，拦截器会自动捕获并处理。
// example api call
apiclient.get('/users')
.then(response => {
console.log('user data:', response.data);
})
.catch(error => {
// this will be triggered if the error isn't handled by the interceptor
console.error('error fetching users:', error);
});
在此设置中，您无需为每个 api 调用编写错误处理代码。拦截器集中了这个逻辑，让你的 api 调用更干净、更容易维护。
axios 拦截器的实际用例
1. 自动令牌刷新
如果您的api使用身份验证令牌（例如jwt），您可能会遇到令牌过期的情况，需要刷新它。 axios 拦截器可用于在收到 401 unauthorized 响应时自动刷新令牌。
apiclient.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
if (error.response.status === 401) {
try {
// call a function to refresh the token
const newtoken = await refreshauthtoken();
error.config.headers['authorization'] = `bearer ${newtoken}`;
// retry the original request with the new token
return axios(error.config);
} catch (refresherror) {
console.error('token refresh failed:', refresherror);
// optionally redirect to login
return promise.reject(refresherror);
}
}
return promise.reject(error);
}
);
2. 处理网络错误
如果您的应用依赖外部 api，网络问题可能是一个常见问题。 axios 拦截器可以在网络故障时帮助提供用户友好的错误消息。
apiClient.interceptors.response.use(
(response) => response,
(error) => {
if (!error.response) {
alert('Network error: Please check your internet connection');
}
return Promise.reject(error);
}
);
使用 axios 拦截器的好处
集中式错误处理：您无需为每个 api 调用编写错误处理代码，而是可以在单个位置处理错误。
更干净的代码：由于错误处理由拦截器负责，因此您的各个 api 调用将更加干净和简洁。
改进的可维护性：可以在一个地方完成错误处理的更改（例如添加新案例或细化错误消息），使代码库更易于维护。
一致性：拦截器确保采用一致的方法来处理错误，因此您不必担心丢失边缘情况或编写冗余代码。
结论
使用 axios 拦截器处理 api 错误响应可以极大地提高代码的结构、可维护性和一致性。通过集中错误处理逻辑，您可以提高 api 调用效率并减少应用程序中的重复代码。
拦截器是 axios 的一项强大功能，可用于广泛的用例，从管理令牌刷新到在网络故障期间显示用户友好的错误消息。立即开始利用 axios 拦截器来简化错误处理并提高应用程序的弹性！
