前端进阶中的数据请求拦截怎么实现？

如何实现高效的数据请求拦截

在前端开发的复杂应用中,数据请求拦截是一项至关重要的技术，它不仅能够帮助开发者统一处理请求与响应，还能增强应用的安全性、提升用户体验。实现数据请求拦截，主要可以通过Axios的拦截器机制或是Fetch API的封装与扩展来进行。 本文将深入探讨这两种主流方法，助你在前端进阶之路上更进一步。

前端进阶中的数据请求拦截怎么实现？

Axios拦截器：灵活而强大

Axios,作为一款基于Promise的HTTP客户端，因其简洁的API、丰富的配置选项以及强大的拦截器功能，在前端社区广受欢迎，Axios拦截器允许你在请求发送前或响应接收后执行特定的逻辑，非常适合用于添加全局的请求头、处理错误响应、日志记录等场景。

实现步骤：

创建Axios实例（可选）：虽然可以直接使用Axios的默认实例，但创建自定义实例能让你对配置有更精细的控制。
```
import axios from 'axios';
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});
```

添加请求拦截器：在请求发送前，你可以在这里添加token、修改配置等。

api.interceptors.request.use(
  (config) => {
    // 假设我们需要在每个请求头中添加一个认证token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

添加响应拦截器：在响应返回后，你可以在这里统一处理错误、解析数据等。

api.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么，比如解密、格式化等
    return response.data; // 假设我们只需要返回数据部分
  },
  (error) => {
    // 对响应错误做点什么，比如弹出错误提示、重定向等
    if (error.response.status === 401) {
      // 假设401表示未授权，跳转到登录页
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

Fetch API的封装与拦截

Fetch API是现代浏览器原生提供的用于发起网络请求的接口，它返回一个Promise，使得异步请求的处理更加简洁，Fetch本身并不直接支持拦截器模式，因此我们需要通过封装来实现类似的功能。

实现思路：

封装Fetch请求：创建一个高阶函数，该函数接受请求的配置参数，并返回一个Promise，该Promise在请求完成后解析为响应数据或错误。
在封装函数中实现拦截逻辑：在发送请求前和接收响应后，可以插入自定义的处理逻辑，如添加请求头、处理错误等。

示例代码：

function fetchWrapper(url, options = {}) {
  // 可以在这里添加全局的请求头或其他配置
  options.headers = {
    ...options.headers,
    'Content-Type': 'application/json',
  };
  return fetch(url, options)
    .then(async (response) => {
      // 可以在这里统一处理响应，比如检查响应状态码
      if (!response.ok) {
        const error = new Error('Network response was not ok');
        error.status = response.status;
        throw error;
      }
      // 或者对响应数据进行处理
      return await response.json(); // 假设我们期望响应体为JSON
    })
    .catch((error) => {
      // 可以在这里统一处理错误
      console.error('Fetch error:', error);
      throw error;
    });
}
// 使用示例
fetchWrapper('https://api.example.com/data')
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error));