如何在React.js中通过按钮点击调用axios.get并展示响应结果

1. 先安装Axios #

确保项目已安装Axios，执行以下命令：

npm install axios
# 或使用yarn
yarn add axios

2. 函数组件实现（推荐） #

用React Hooks管理状态，这是当前React的主流写法：

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

function DataFetcher() {
  // 定义状态：存储请求结果、加载状态、错误信息
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 点击按钮触发的请求处理函数
  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      // 替换为你的目标API地址
      const response = await axios.get('https://api.example.com/data');
      setData(response.data);
    } catch (err) {
      setError('请求失败：' + err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {/* 加载状态下禁用按钮，避免重复请求 */}
      <button onClick={fetchData} disabled={loading}>
        {loading ? '加载中...' : '获取数据'}
      </button>

      {/* 展示错误信息 */}
      {error && <p style={{ color: 'red' }}>{error}</p>}

      {/* 展示加载提示 */}
      {loading && <p>正在加载数据...</p>}

      {/* 展示请求结果 */}
      {data && (
        <div>
          <h3>请求结果：</h3>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default DataFetcher;

3. 类组件实现（兼容旧版本React） #

如果项目仍在使用类组件，可参考以下写法：

import React, { Component } from 'react';
import axios from 'axios';

class DataFetcher extends Component {
  state = {
    data: null,
    loading: false,
    error: null
  };

  fetchData = async () => {
    this.setState({ loading: true, error: null });
    try {
      const response = await axios.get('https://api.example.com/data');
      this.setState({ data: response.data });
    } catch (err) {
      this.setState({ error: '请求失败：' + err.message });
    } finally {
      this.setState({ loading: false });
    }
  };

  render() {
    const { data, loading, error } = this.state;
    return (
      <div>
        <button onClick={this.fetchData} disabled={loading}>
          {loading ? '加载中...' : '获取数据'}
        </button>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        {loading && <p>正在加载数据...</p>}
        {data && (
          <div>
            <h3>请求结果：</h3>
            <pre>{JSON.stringify(data, null, 2)}</pre>
          </div>
        )}
      </div>
    );
  }
}

export default DataFetcher;

关键细节说明 #

• 状态管理：用loading控制按钮禁用和加载提示，防止重复请求；error存储错误信息，给用户明确反馈；data保存接口返回的响应数据。
• 错误处理：通过try/catch捕获请求异常，避免程序崩溃。
• 结果展示：用JSON.stringify格式化数据便于查看结构，实际项目中可根据数据结构渲染成对应UI。

内容的提问来源于stack exchange，提问作者fabrod