在 React 中使用 Axios：从基础到高级实践指南

npx create-react-app react-axios-example

cd react-axios-example

npm install axios

yarn add axios

$ npm list axios
react-axios-example@0.1.0 /path/to/react-axios-example
└── axios@1.6.x

mkdir src/components

// src/components/PersonList.js
import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
      .catch(err => {
        console.error('Error fetching data:', err);
      });
  }

  render() {
    return (
      <ul>
        {
          this.state.persons
            .map(person =>
              <li key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

// src/components/PersonListHooks.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function PersonListHooks() {
  const [persons, setPersons] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController(); // Axios 支持 AbortController
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const res = await axios.get('https://jsonplaceholder.typicode.com/users', {
          signal: controller.signal,
          // headers: { Authorization: `Bearer ${token}` }, // 认证示例
        });
        setPersons(res.data);
      } catch (err) {
        // 区分取消、网络错误和 HTTP 错误
        if (axios.isCancel?.(err) || err.name === 'CanceledError') return;
        if (err.response) {
          // 服务器以非 2xx 状态响应
          setError(`服务器错误: ${err.response.status} ${err.response.statusText}`);
        } else if (err.request) {
          // 未收到响应
          setError('网络错误: 服务器无响应');
        } else {
          // 请求设置时发生其他问题
          setError(`请求错误: ${err.message}`);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
    return () => controller.abort(); // 清理: 卸载时取消飞行中请求
  }, []); // 空依赖数组: 挂载时运行一次

  if (loading) return <p>加载用户中…</p>;
  if (error) return <p role="alert">{error}</p>;

  return (
    <ul>
      {persons.map((person) =>
        <li key={person.id}>{person.name}</li>
      )}
    </ul>
  );
}

export default PersonListHooks;

// src/App.js
import PersonList from './components/PersonList.js';

function App() {
  return (
    <div className="App">
      <PersonList/>
    </div>
  )
}

// src/App.js
import PersonListHooks from './components/PersonListHooks';

function App() {
  return (
    <div className="App">
      <PersonListHooks />
    </div>
  );
}

npm start

<ul>
  <li>Leanne Graham</li>
  <li>Ervin Howell</li>
  <li>Clementine Bauch</li>
  <!-- … 7 more … -->
</ul>

// src/components/PersonAdd.js
import React from 'react';
import axios from 'axios';

export default class PersonAdd extends React.Component {
  state = {
    name: ''
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = async event => {
    event.preventDefault();

    const user = { name: this.state.name };

    try {
      const res = await axios.post('https://jsonplaceholder.typicode.com/users', user);
      console.log('Status:', res.status);
      console.log('Response data:', res.data);
    } catch (err) {
      if (err.response) {
        console.error('POST failed with status:', err.response.status, err.response.statusText);
      } else if (err.request) {
        console.error('Network error: no response from server');
      } else {
        console.error('Request setup error:', err.message);
      }
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

// src/App.js
import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';

function App() {
  return (
    <div className="App">
      <PersonAdd/>
      <PersonList/>
    </div>
  )
}

// src/App.js
import PersonAddHooks from './components/PersonAddHooks';

function App() {
  return (
    <div className="App">
      <PersonAddHooks />
    </div>
  );
}

npm start

Status: 201
Response data: { id: 101, name: "Ada Lovelace" }

// src/components/PersonAddHooks.js
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';

function PersonAddHooks() {
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const lastStatus = useRef(null);

  useEffect(() => {
    // 此处无初始 POST；每个提交创建 controller
    return () => {
      // 如需清理
    };
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    const controller = new AbortController();

    try {
      const res = await axios.post(
        'https://jsonplaceholder.typicode.com/users',
        { name },
        { signal: controller.signal }
      );
      lastStatus.current = res.status;
      console.log('Status:', res.status);
      console.log('Response data:', res.data);
      setName(''); // 成功时重置
    } catch (err) {
      if (axios.isCancel?.(err) || err.name === 'CanceledError') return;
      if (err.response) {
        setError(`POST 失败: ${err.response.status} ${err.response.statusText}`);
      } else if (err.request) {
        setError('网络错误: 服务器无响应');
      } else {
        setError(`请求设置错误: ${err.message}`);
      }
    } finally {
      setLoading(false);
    }

    // 可选: 如果转换为长运行操作，返回函数取消
    // return () => controller.abort();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Person Name:
        <input
          type="text"
          name="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          disabled={loading}
        />
      </label>
      <button type="submit" disabled={loading || !name.trim()}>
        {loading ? '添加中…' : 'Add'}
      </button>
      {error && <p role="alert">{error}</p>}
      {lastStatus.current && <p>最后状态: {lastStatus.current}</p>}
    </form>
  );
}

export default PersonAddHooks;

// src/PersonRemove.js
import React from 'react';
import axios from 'axios';

export default class PersonRemove extends React.Component {
  state = {
    id: ''
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = async event => {
    event.preventDefault();
    const { id } = this.state;
    if (!id) return;

    try {
      // 注意: 某些生产 API 需要认证 headers；见下方注释
      const res = await axios.delete(`https://jsonplaceholder.typicode.com/users/${id}` /*, {
        headers: { Authorization: `Bearer <token>` }
      }*/);
      console.log('Status:', res.status);
      console.log('Response data:', res.data);
    } catch (err) {
      if (err.response) {
        console.error('DELETE failed with status:', err.response.status, err.response.statusText);
      } else if (err.request) {
        console.error('Network error: no response from server');
      } else {
        console.error('Request setup error:', err.message);
      }
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

// src/components/PersonRemoveHooks.js
import React, { useState, useRef } from 'react';
import axios from 'axios';

function PersonRemoveHooks() {
  const [id, setId] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const lastStatus = useRef(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!id.trim()) return;
    setLoading(true);
    setError(null);
    const controller = new AbortController();

    try {
      // 某些 API 需要 headers（认证/CSRF）。通过 Axios 实例或此处添加。
      const res = await axios.delete(
        `https://jsonplaceholder.typicode.com/users/${id}`,
        { signal: controller.signal }
      );
      lastStatus.current = res.status;
      console.log('Status:', res.status);
      console.log('Response data:', res.data);
      setId('');
    } catch (err) {
      if (axios.isCancel?.(err) || err.name === 'CanceledError') return;
      if (err.response) {
        setError(`DELETE 失败: ${err.response.status} ${err.response.statusText}`);
      } else if (err.request) {
        setError('网络错误: 服务器无响应');
      } else {
        setError(`请求设置错误: ${err.message}`);
      }
    } finally {
      setLoading(false);
    }

    // 可选: return () => controller.abort(); // 如果适应长运行流程
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Person ID:
        <input
          type="number"
          name="id"
          value={id}
          onChange={(e) => setId(e.target.value)}
          disabled={loading}
        />
      </label>
      <button type="submit" disabled={loading || !id.trim()}>
        {loading ? '删除中…' : 'Delete'}
      </button>
      {error && <p role="alert">{error}</p>}
      {lastStatus.current && <p>最后状态: {lastStatus.current}</p>}
    </form>
  );
}

export default PersonRemoveHooks;

// src/App.js
import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';

function App() {
  return (
    <div className="App">
      <PersonAdd/>
      <PersonList/>
      <PersonRemove/>
    </div>
  )
}

// src/App.js
import PersonRemoveHooks from './components/PersonRemoveHooks';

function App() {
  return (
    <div className="App">
      <PersonRemoveHooks />
    </div>
  );
}

npm start

Status: 200
Response data: {}

// src/api.js
import axios from 'axios';

const API = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: false, // 仅当 API 使用 cookies 时设为 true
});

export default API;

// src/api.interceptors.js
import API from './api';

API.interceptors.request.use(
  (config) => {
    // 示例: 从存储附加认证 token
    const token = localStorage.getItem('access_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 示例: 添加相关 ID 用于追踪
    config.headers['X-Request-ID'] = crypto.randomUUID?.() || Date.now().toString(36);
    return config;
  },
  (error) => Promise.reject(error)
);

// src/api.interceptors.js (续)
API.interceptors.response.use(
  (response) => response,
  async (error) => {
    const { response, config } = error;
    // 基本遥测
    console.warn('API 错误:', {
      url: config?.url,
      method: config?.method,
      status: response?.status,
    });

    // 示例: 处理过期访问 token
    if (response?.status === 401 && !config.__isRetry) {
      config.__isRetry = true;
      try {
        // 伪刷新流程；替换为你的认证端点
        const refreshToken = localStorage.getItem('refresh_token');
        if (refreshToken) {
          // await axios.post('/auth/refresh', { refreshToken });
          // localStorage.setItem('access_token', newAccessToken);
          // config.headers.Authorization = `Bearer ${newAccessToken}`;
          return API(config); // 重试原始请求
        }
      } catch (e) {
        // 回退到拒绝
      }
    }
    return Promise.reject(error);
  }
);

// src/components/PersonRemove.js
import React from 'react';
import API from '../api';
import '../api.interceptors'; // 确保拦截器只注册一次

export default class PersonRemove extends React.Component {
  state = { id: '' };

  handleChange = (e) => this.setState({ id: e.target.value });

  handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await API.delete(`users/${this.state.id}`);
      console.log(res.data);
    } catch (err) {
      console.error('删除失败:', err);
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Person ID:
          <input type="number" name="id" onChange={this.handleChange} />
        </label>
        <button type="submit">Delete</button>
      </form>
    );
  }
}

// src/components/PersonRemove.js
import React from 'react';
import API from '../api';

export default class PersonRemove extends React.Component {
  state = { id: '' };

  handleChange = (e) => this.setState({ id: e.target.value });

  handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await API.delete(`users/${this.state.id}`);
      console.log('Status:', response.status);
      console.log('Response data:', response.data);
    } catch (err) {
      if (err.response) {
        console.error('Delete failed with status:', err.response.status, err.response.statusText);
      } else if (err.request) {
        console.error('Network error: no response from server');
      } else {
        console.error('Request setup error:', err.message);
      }
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Person ID:
          <input type="number" name="id" onChange={this.handleChange} />
        </label>
        <button type="submit">Delete</button>
      </form>
    );
  }
}

import axios /*, { AxiosError }*/ from 'axios';

try {
  // ...
} catch (err) {
  // 1) 缩小到 Axios 错误（防护无关异常）
  if (axios.isAxiosError?.(err)) {
    // 2) 取消（组件卸载 / 用户导航）
    if (err.name === 'CanceledError') {
      // 静默忽略或仅调试日志
      return;
    }
    // 3) 超时（Axios 在超时设置 code ECONNABORTED）
    if (err.code === 'ECONNABORTED' || err.message?.toLowerCase().includes('timeout')) {
      // 可选表面“请求超时”并建议重试
    }
    // 4) 网络 vs HTTP 状态
    if (err.response) {
      // HTTP 错误: 使用 err.response.status / statusText
    } else if (err.request) {
      // 网络错误: 服务器无响应
    }
  } else {
    // 非 Axios 错误（运行时/逻辑）— 重新抛出或单独处理
    throw err;
  }
}

import axios from 'axios';

try {
  const res = await axios.get('/users');
  // 使用 res.data
} catch (err) {
  if (err.response) {
    console.error('服务器错误:', err.response.status);
  } else if (err.request) {
    console.error('网络错误:', err.message);
  } else {
    console.error('请求设置错误:', err.message);
  }
}

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

export function useUsers() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const run = async () => {
      setLoading(true);
      setError(null);
      try {
        const res = await axios.get('/users', { signal: controller.signal });
        setData(res.data);
      } catch (err) {
        if (axios.isCancel?.(err) || err.name === 'CanceledError') return;
        if (err.response) {
          const { status, statusText } = err.response;
          setError(`请求失败 (${status} ${statusText})。请重试。`);
        } else if (err.request) {
          setError('网络错误: 服务器无响应。');
        } else {
          setError(`请求错误: ${err.message}`);
        }
      } finally {
        setLoading(false);
      }
    };
    run();
    return () => controller.abort();
  }, []);

  return { data, loading, error };
}

// api.js
import axios from 'axios';
const API = axios.create({ baseURL: '/api', timeout: 10000 });
export default API;

// api.errors.js — 为 UI 标准化消息并为日志保留诊断
export function normalizeAxiosError(err) {
  if (err.response) {
    const { status, statusText, data } = err.response;
    const ui = status === 401
      ? '请登录继续。'
      : status === 403
      ? '您无权限执行此操作。'
      : status === 404
      ? '请求资源未找到。'
      : status >= 500
      ? '服务器当前不可用。请稍后重试。'
      : `请求失败 (${status} ${statusText})。`;

    return { ui, diag: { status, statusText, data } };
  }
  if (err.request) return { ui: '网络错误: 服务器无响应。', diag: { message: err.message } };
  return { ui: `请求错误: ${err.message}`, diag: { message: err.message } };
}

// api.interceptors.js — 添加上下文；可选在此映射错误
import API from './api';
import { normalizeAxiosError } from './api.errors';

API.interceptors.request.use((config) => {
  const token = localStorage.getItem('access_token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  config.headers['X-Request-ID'] = crypto.randomUUID?.() || Date.now().toString(36);
  return config;
});

API.interceptors.response.use(
  (res) => res,
  (error) => {
    // 为消费者附加标准化消息
    error.normalized = normalizeAxiosError(error);
    // 基本遥测
    console.warn('API 错误', {
      url: error.config?.url,
      method: error.config?.method,
      ...error.normalized.diag,
    });
    return Promise.reject(error);
  }
);

// 示例消费者（组件/服务）
import API from './api';
import './api.interceptors';

async function deleteUser(id, setError) {
  try {
    await API.delete(`/users/${id}`);
  } catch (err) {
    setError(err.normalized?.ui ?? '发生错误。');
  }
}

import axios from "axios";
import { useQuery } from "@tanstack/react-query";

const fetchUsers = async () => {
  const { data } = await axios.get("/api/users");
  return data;
};

function UserList() {
  const { data, error, isLoading } = useQuery(["users"], fetchUsers);

  if (isLoading) return <p>加载中...</p>;
  if (error) return <p>错误: {error.message}</p>;

  return (
    <ul>
      {data.map((user) =>
        <li key={user.id}>{user.name}</li>
      )}
    </ul>
  );
}

// src/hooks/useAxios.js
import { useCallback, useEffect, useRef, useState } from 'react';
import API from '../api'; // 配置的 axios 实例

/**
 * useAxios — 通用 Axios Hook
 * @param {Object} options - { url, method, data, params, headers, immediate }
 * @returns {Object} { data, error, loading, status, execute, cancel }
 */
export default function useAxios({
  url,
  method = 'get',
  data = undefined,
  params = undefined,
  headers = undefined,
  immediate = true
} = {}) {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState(undefined);
  const controllerRef = useRef(null);

  const execute = useCallback(async (override = {}) => {
    setLoading(true);
    setError(null);
    controllerRef.current?.abort();
    controllerRef.current = new AbortController();
    try {
      const res = await API.request({
        url,
        method,
        data,
        params,
        headers,
        signal: controllerRef.current.signal,
        ...override,
      });
      setStatus(res.status);
      setResponse(res.data);
      return res;
    } catch (err) {
      // 不将取消视为错误
      if (err.name === 'CanceledError') return;
      setStatus(err.response?.status);
      setError(err);
      throw err;
    } finally {
      setLoading(false);
    }
  }, [url, method, data, params, headers]);

  const cancel = useCallback(() => controllerRef.current?.abort(), []);

  useEffect(() => {
    if (immediate && url) execute();
    return () => controllerRef.current?.abort();
  }, [immediate, url, execute]);

  return { data: response, error, loading, status, execute, cancel };
}

// src/components/UsersWithHook.js
import React from 'react';
import useAxios from '../hooks/useAxios';

export default function UsersWithHook() {
  const { data: users, loading, error, status, execute } = useAxios({ url: 'users' });

  if (loading) return <p>加载中…</p>;
  if (error) return <p role="alert">失败 ({status ?? 'N/A'})。重试。</p>;

  return (
    <div>
      <button onClick={() => execute()}>重新加载</button>
      <ul>
        {(users || []).map(u => (<li key={u.id}>{u.name}</li>))}
      </ul>
    </div>
  );
}

// src/App.js
import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';

function App() {
  return (
    <div className="App">
      <h2>添加人员</h2>
      <PersonAdd />
      <h2>人员列表</h2>
      <PersonList />
      <h2>移除人员</h2>
      <PersonRemove />
    </div>
  );
}

export default App;

// src/App.js
import PersonListHooks from './components/PersonListHooks';
import PersonAddHooks from './components/PersonAddHooks';
import PersonRemoveHooks from './components/PersonRemoveHooks';

function App() {
  return (
    <div className="App">
      <h2>添加人员</h2>
      <PersonAddHooks />
      <h2>人员列表</h2>
      <PersonListHooks />
      <h2>移除人员</h2>
      <PersonRemoveHooks />
    </div>
  );
}

export default App;

// src/App.js
import PersonList from './components/PersonList';
import PersonAddHooks from './components/PersonAddHooks';
import PersonRemoveHooks from './components/PersonRemoveHooks';

function App() {
  return (
    <div className="App">
      <PersonAddHooks />
      <PersonList />
      <PersonRemoveHooks />
    </div>
  );
}

export default App;

import API from './api';

async function fetchUsersPage(page = 1, limit = 5) {
  const res = await API.get('users', { params: { _page: page, _limit: limit } });
  // JSONPlaceholder 在 headers 中发送总数
  const total = res.headers['x-total-count'];
  console.log('总用户:', total);
  return res.data;
}

import API from './api';

async function fetchUsersAndPosts() {
  const [usersRes, postsRes] = await Promise.all([
    API.get('users'),
    API.get('posts'),
  ]);
  return { users: usersRes.data, posts: postsRes.data };
}

import React, { useState } from 'react';
import API from './api';

function FileUploader() {
  const [progress, setProgress] = useState(0);
  const [file, setFile] = useState(null);

  const handleChange = (e) => setFile(e.target.files[0]);

  const handleUpload = async () => {
    if (!file) return;
    const form = new FormData();
    form.append('file', file);
    try {
      await API.post('/upload', form, {
        onUploadProgress: (evt) => {
          if (evt.total) setProgress(Math.round((evt.loaded * 100) / evt.total));
        },
      });
      alert('上传完成！');
    } catch (err) {
      alert('上传失败！');
    }
  };

  return (
    <div>
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>上传</button>
      {progress > 0 && <p>进度: {progress}%</p>}
    </div>
  );
}

import axios from 'axios';

const API = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  timeout: 8000, // 8 秒
});

async function fetchWithTimeout() {
  try {
    const res = await API.get('users');
    return res.data;
  } catch (err) {
    if (err.code === 'ECONNABORTED') {
      console.error('请求超时！');
    } else {
      console.error('其他错误:', err.message);
    }
  }
}

// src/mcp/index.js  – 使用 Axios fetcher 注册 MCP 上下文
import { createMCPClient } from 'react-mcp/client';
import API from '../api';            // 你的共享 Axios 实例
import '../api.interceptors';        // 确保拦截器只加载一次

const mcp = createMCPClient({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  // 使用 Axios 作为所有底层 HTTP 调用以保留拦截器/超时
  fetcher: (cfg) => API.request(cfg),
});

export const MCPProvider = mcp.Provider; // 上下文提供器
export const useModel = mcp.useModel;    // 订阅模型的 Hook

// src/App.js – 用 MCP 提供器包装应用
import { MCPProvider } from './mcp';
import PersonListHooks from './components/PersonListHooks';

function App() {
  return (
    <MCPProvider>
      <PersonListHooks />
    </MCPProvider>
  );
}

// src/components/PersonListMCP.js – 声明式数据切片
import { useModel } from '../mcp';

export default function PersonListMCP() {
  // 第一个参数是服务器侧 *模型名*；第二个是查询/过滤参数
  const { data: users, loading, error, refetch } = useModel('users', { limit: 10 });

  if (loading) return <p>加载用户中…</p>;
  if (error)   return <p role="alert">{error.message}</p>;

  return (
    <div>
      <button onClick={refetch}>重新加载</button>
      <ul>
        {users.map((u) => <li key={u.id}>{u.name}</li>)}
      </ul>
    </div>
  );
}

npm install axios   # 或: yarn add axios

import axios from 'axios';
// 或集中配置
// import API from './api';

useEffect(() => {
  const controller = new AbortController();
  axios.get('/users', { signal: controller.signal })
    .then(r => setData(r.data))
    .catch(console.error);
  return () => controller.abort();
}, []);

try {
  const res = await axios.post('/users', { name });
  console.log(res.status, res.data);
} catch (err) {
  // 处理 err.response / err.request / err.message
}

try {
  const res = await API.delete(`/users/${id}`);
  setResult(res.data);
} catch (err) {
  // 此处状态感知处理
}

const controller = new AbortController();
axios.get('/users', { signal: controller.signal });
// 稍后
controller.abort();