axios拦截秘籍：揭秘两种强大拦截方式

前端

2023-03-03 23:47:02

利用 Axios 拦截器掌控 HTTP 请求与响应

概述

Axios 是前端开发中常用的 HTTP 客户端库，其强大的拦截器机制赋予开发者在发送请求和处理响应之前或之后执行自定义操作的能力。理解并掌握 Axios 拦截器的使用技巧，将极大地提升前端代码的灵活性和健壮性。

请求拦截：扼守请求之门

请求拦截器提供了一种在发出 HTTP 请求之前对其进行检查、修改或取消的方式。这赋予开发者以下优势：

自动添加请求头： 无缝添加必要的请求头，如 Content-Type 或 Authorization，以确保服务器的正确处理。
修改请求参数： 调整请求参数，补充缺失信息或纠正错误，确保数据的完整性和正确性。
取消请求： 根据特定条件取消请求，避免不必要的服务器交互，提升性能。

代码示例：

// 添加 "Content-Type" 请求头
axios.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json';
  return config;
});

// 修改 "token" 请求参数
axios.interceptors.request.use(config => {
  config.params.token = localStorage.getItem('token');
  return config;
});

// 取消敏感请求
axios.interceptors.request.use(config => {
  if (config.url.includes('sensitive')) {
    return Promise.reject('敏感请求被取消');
  }
  return config;
});

响应拦截：掌控响应流

响应拦截器允许开发者在接收到服务器响应后对其进行处理或修改。这提供了以下便利：

修改响应数据： 解析、转换或过滤响应数据，使其更容易使用或存储。
处理错误： 针对不同的错误响应进行统一处理，如显示错误信息、重试请求或跳转到错误页面。
实现跨域请求： 通过设置 Access-Control-Allow-Origin 响应头实现跨域请求的访问控制。

代码示例：

// 解析响应数据为 JSON 对象
axios.interceptors.response.use(response => {
  response.data = JSON.parse(response.data);
  return response;
});

// 处理 400+ 错误响应
axios.interceptors.response.use(response => {
  if (response.status >= 400) {
    alert('请求失败，错误代码：' + response.status);
  }
  return response;
});

// 允许跨域请求
axios.interceptors.response.use(response => {
  response.headers['Access-Control-Allow-Origin'] = '*';
  return response;
});