如何在React.js中用JavaScript通过带授权的GET API获取响应JSON

下面给你两种常用的实现方式，都是在React组件中调用指定的GET API并获取JSON响应：

方法一：使用原生 fetch API #

这是浏览器内置的API，无需额外安装依赖。在React组件中，通常结合useState和useEffect来管理请求状态与数据：

import { useState, useEffect } from 'react';

function ApiDataComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  const apiUrl = "https://xxxx.com/_xxx/xxx/_all";
  const authToken = "Header xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': authToken,
            'Accept': 'application/json' // 明确告知服务器需要JSON格式响应
          }
        });

        if (!response.ok) {
          throw new Error(`请求失败: ${response.status} ${response.statusText}`);
        }

        const jsonData = await response.json();
        setData(jsonData);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []); // 空依赖数组确保仅在组件挂载时发起一次请求

  // 渲染不同状态
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <div>
      <h2>API响应数据</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default ApiDataComponent;

方法二：使用 axios 库 #

如果你的项目已使用axios，或想更简洁地处理HTTP请求，可先安装依赖：

npm install axios
# 或
yarn add axios

之后在组件中使用：

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

function ApiDataComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  const apiUrl = "https://xxxx.com/_xxx/xxx/_all";
  const authToken = "Header xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(apiUrl, {
          headers: {
            'Authorization': authToken
          }
        });
        setData(response.data); // axios会自动解析JSON格式响应
      } catch (err) {
        setError(err.response ? `请求失败: ${err.response.status}` : err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <div>
      <h2>API响应数据</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default ApiDataComponent;

关键注意点 #

• Authorization头：确保传入的authToken完全符合API要求的格式（你提供的Header xxxxxxx可直接放入Authorization字段）。
• 错误处理：必须处理请求失败的场景（如网络错误、HTTP状态码非2xx），避免组件崩溃。
• 组件生命周期：使用useEffect空依赖数组可确保请求仅在组件挂载时执行一次；若需根据参数重新请求，将参数加入依赖数组即可。
• 响应解析：fetch需手动调用response.json()解析响应，而axios会自动完成JSON解析。

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