在 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 模式可以有效地将拦截器和其他配置注册到整个应用中，方便管理和使用。