Axios 请求与响应拦截器的巧妙运用：提升开发效率和用户体验

2023-11-06 20:45:34

引言

Axios 是一个流行的 JavaScript 库，用于在 Web 应用程序中进行 HTTP 请求。其请求和响应拦截器是一个强有力的工具，可以简化代码、提高可维护性，并增强应用程序的行为。

请求拦截器：管理请求

请求拦截器在请求被发送之前执行，允许我们对请求进行修改。一个常见的用途是为需要令牌的请求添加授权标头。

例如，我们可以创建一个拦截器，在每次请求时检查本地存储中的令牌，如果存在，将其添加到请求标头中：

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('my-token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

响应拦截器：处理响应

响应拦截器在接收到响应后执行，允许我们检查和修改响应数据。一个常见的用途是管理全局加载状态。

例如，我们可以创建一个拦截器，在每个请求开始时显示加载指示器，并在响应接收后将其隐藏：

axios.interceptors.response.use((response) => {
  hideLoadingIndicator();
  return response;
}, (error) => {
  hideLoadingIndicator();
  return Promise.reject(error);
});

综合示例

为了展示请求和响应拦截器的综合使用，让我们考虑一个涉及用户认证的应用程序。当用户登录时，我们可以获取令牌并将其存储在本地存储中。

使用请求拦截器，我们可以为需要令牌的请求添加授权标头：

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('my-token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

然后，我们可以使用响应拦截器来检查响应状态并相应地采取措施：

axios.interceptors.response.use((response) => {
  if (response.status === 401) {
    // 令牌无效，重新登录
    window.location.href = '/login';
  }
  return response;
}, (error) => {
  // 请求失败，显示错误消息
  alert('请求失败！');
  return Promise.reject(error);
});