当前位置：首页 > React

react如何使用axios

2026-03-31 04:21:33React

使用 Axios 在 React 中发送 HTTP 请求

安装 Axios 依赖
在项目中运行以下命令安装 Axios：

npm install axios
# 或
yarn add axios

基本 GET 请求示例

在组件中导入 Axios 并发送 GET 请求：

react如何使用axios

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

发送 POST 请求

发送数据到服务器并处理响应：

const handleSubmit = async () => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'New Post',
      body: 'Content of the new post',
      userId: 1
    });
    console.log('Post created:', response.data);
  } catch (error) {
    console.error('Error creating post:', error);
  }
};

创建 Axios 实例

配置默认选项，避免重复代码：

react如何使用axios

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

// 使用实例
api.get('/posts').then(response => console.log(response.data));

处理错误响应

全局拦截错误或特定状态码：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 404) {
      console.log('Resource not found');
    }
    return Promise.reject(error);
  }
);

取消请求

防止组件卸载时继续执行未完成的请求：

useEffect(() => {
  const source = axios.CancelToken.source();

  axios.get('/posts', { cancelToken: source.token })
    .then(response => console.log(response.data))
    .catch(thrown => {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled:', thrown.message);
      } else {
        console.error('Error:', thrown);
      }
    });

  return () => {
    source.cancel('Component unmounted, request canceled');
  };
}, []);