正文

掌握React项目Axios拦截器设置：轻松实现请求与响应统一管理

/0 浏览量
1104

在React项目中，Axios是一个非常流行的HTTP客户端，用于在前后端通信中发送请求。Axios拦截器是Axios提供的一个强大功能，允许你在请求发送之前和响应返回之后进行一些自定义的操作。通过合理使用拦截器，可以实现请求与响应的统一管理，提高代码的可维护性和扩展性。

一、Axios拦截器概述

Axios拦截器分为两种类型：请求拦截器（Request Interceptors）和响应拦截器（Response Interceptors）。

  1. 请求拦截器：在请求发送之前进行一些操作，如添加请求头、取消重复请求等。
  2. 响应拦截器：在响应返回之后进行一些操作，如处理错误、全局响应格式化等。

二、配置请求拦截器

1. 安装Axios

首先，确保你的项目中已经安装了Axios。可以通过npm或yarn进行安装：

npm install axios
# 或者
yarn add axios

2. 创建Axios实例

创建一个Axios实例，并设置拦截器：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // 添加请求头
  config.headers.Authorization = 'Bearer your-token';
  // 可以进行其他操作，如取消重复请求等
  return config;
}, error => {
  // 请求错误处理
  return Promise.reject(error);
});

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

export default instance;

3. 使用Axios实例发送请求

import instance from './axiosInstance';

instance.get('/data').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

三、配置响应拦截器

响应拦截器主要用于处理响应数据，例如全局响应格式化、错误处理等。

// 响应拦截器
instance.interceptors.response.use(response => {
  // 格式化响应数据
  const { data } = response;
  return data;
}, error => {
  // 处理错误
  if (error.response) {
    // 请求已发出，但服务器响应的状态码不在2xx的范围
    console.error(error.response.data);
  } else if (error.request) {
    // 请求已发出，但没有收到响应
    console.error(error.request);
  } else {
    // 在设置请求时触发了错误
    console.error('Error', error.message);
  }
  return Promise.reject(error);
});

四、总结

通过使用Axios拦截器，我们可以轻松地实现请求与响应的统一管理，提高代码的可维护性和扩展性。在实际项目中，可以根据需求配置不同的拦截器，实现各种自定义操作。希望这篇文章能帮助你更好地理解Axios拦截器的使用。

-- 展开阅读全文 --