Axios拦截器的花式玩耍姿势, 带你飞起

2023-08-28 10:47:43

轻松掌控 HTTP 请求：使用 Axios 拦截器的 3 大秘诀

简介

HTTP 请求对于现代 Web 应用程序至关重要。Axios 是一个流行的 JavaScript 库，可简化与服务器的通信。它的拦截器功能提供了强大的灵活性，让开发人员能够自定义和增强请求和响应处理。本文将深入探讨 Axios 拦截器的三个主要用例，帮助您充分利用它们。

妙招一： 服务器响应：错误拦截，一网打尽

问题：

应用程序代码中散布着重复的错误处理逻辑。
不同的页面使用不同的错误处理机制，导致用户体验不一致。

解决方案：

使用响应拦截器统一处理错误。在响应拦截器中，您可以检查状态码，并根据需要采取适当的措施。对于常见错误，您可以显示用户友好的消息；对于其他错误，您可以根据收到的响应信息弹出警报框。

代码示例：

axios.interceptors.response.use(
  (response) => {
    // 处理成功的响应
    return response.data;
  },
  (error) => {
    // 处理错误的响应
    if (error.response.status === 401) {
      // 未经授权
      alert('您的会话已过期。请重新登录。');
    } else {
      // 其他错误
      alert('抱歉，出现了一些问题。请稍后再试。');
    }
    return Promise.reject(error);
  }
);

妙招二： 浏览器请求：本地 token，一键搞定

问题：

每个请求都需要手动添加授权令牌。
忘记添加令牌会导致未经授权的请求和服务器错误。

解决方案：

使用请求拦截器自动在所有请求中添加本地存储中的令牌。在请求拦截器中，您可以检查硬盘中是否存在令牌，并在请求头中将其包含在 Authorization 标头中。

代码示例：

axios.interceptors.request.use(
  (config) => {
    // 从本地存储中获取令牌
    const token = localStorage.getItem('token');
    // 将令牌添加到请求头中
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 处理错误
    return Promise.reject(error);
  }
);

妙招三： 请求头设置：一劳永逸，省时省力

问题：

在每个请求中重复设置常见的请求头很繁琐。
维护多个请求头配置可能很困难。

解决方案：

通过全局设置请求头，省去每次请求中设置它们的麻烦。您可以在 Axios 实例中指定默认请求头，这样它们就会自动应用于所有请求。这简化了请求头管理，并提高了代码的可维护性。

代码示例：

const instance = axios.create({
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
});

如何使用 Axios 拦截器

安装 Axios 库：npm install axios
导入 Axios：import axios from 'axios';
创建 Axios 实例：const instance = axios.create();
添加响应拦截器：instance.interceptors.response.use();
添加请求拦截器：instance.interceptors.request.use();

示例

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 处理响应
    return response.data;
  },
  (error) => {
    // 处理错误
    return Promise.reject(error);
  }
);

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 处理请求
    return config;
  },
  (error) => {
    // 处理错误
    return Promise.reject(error);
  }
);

// 使用实例发送请求
instance.get('/users').then((response) => {
  console.log(response.data);
});