在 React 项目中使用 Axios

安装 Axios
首先，在项目下安装 Axios 依赖：

npm install axios

或者：

yarn add axios

在组件中直接调用 Axios
在 React 的函数组件中，你可以直接使用 Axios 进行数据请求。通常我们会结合 React 的 useState 和 useEffect 实现数据的获取和管理，例如：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('/api/data')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>发生错误...</div>;

  return (
    <div>
      <h1>数据展示</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

这种方式简单直观，适用于单个组件内部的数据请求需求。

封装 Axios 实例
为了在整个项目中统一管理和复用 Axios 的配置（如基础 URL、超时配置以及请求与响应拦截器），可以创建一个 Axios 实例。例如：

// axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '<https://api.example.com>',
  timeout: 5000,
});

// 请求拦截器：如添加认证 token
axiosInstance.interceptors.request.use(
  config => {
    // Modify config before request is sent, e.g.,添加token
    // config.headers.Authorization = 'Bearer yourToken';
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器：统一处理响应
axiosInstance.interceptors.response.use(
  response => response,
  error => Promise.reject(error)
);

export default axiosInstance;

然后在你的组件中引入这个实例，而不是直接使用 Axios，通过这种方式可以确保全局请求配置的一致性和便于维护。

结合 React Context 和 Provider
如果你的应用中有很多组件都需要发起请求，并且希望在统一配置（例如统一注册请求拦截器）后进行调用，可以使用 React 的 Context 来组织 Axios 实例。通过 Provider 将配置好的 Axios 实例传递给整个组件树，以便在各个组件中通过 useContext 取得该实例，这也是符合 React Hooks 思想的一种方式。例如：

// AxiosContext.js
import React, { createContext } from 'react';
import axiosInstance from './axiosInstance';

export const AxiosContext = createContext(axiosInstance);

export const AxiosProvider = ({ children }) => {
  return (
    <AxiosContext.Provider value={axiosInstance}>
      {children}
    </AxiosContext.Provider>
  );
};

然后在组件中使用：

import React, { useContext, useEffect, useState } from 'react';
import { AxiosContext } from './AxiosContext';

const MyComponent = () => {
  const axios = useContext(AxiosContext);
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('/api/data').then(response => {
      setData(response.data);
    });
  }, [axios]);

  return <div>{data ? JSON.stringify(data) : '加载中...'}</div>;
};

export default MyComponent;

这种 Provider 模式可以有效地将拦截器和其他配置注册到整个应用中，方便管理和使用。