ReactJS中如何使用带密钥的API获取元数据？

你这段jQuery的$.get代码可以调整后在React里运行，但React项目里更推荐用原生fetch或者axios来发请求——既轻量又贴合React生态习惯，下面给你具体实现方式：

方案一：使用原生Fetch API（无需额外安装依赖） #

React支持浏览器原生的Fetch API，直接就能用。下面的代码会处理请求头、响应解析，同时帮你获取响应元数据：

import { useEffect, useState } from 'react';

function ProductComponent() {
  const [products, setProducts] = useState([]);
  const [metadata, setMetadata] = useState({});

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch('https://example.com/products', {
          method: 'GET',
          headers: {
            'Authorization': 'Token <key>', // 替换成你的真实密钥
            'Content-Type': 'application/vnd.api+json'
          }
        });

        // 提取响应元数据（比如响应头信息）
        const responseHeaders = {};
        response.headers.forEach((value, key) => {
          responseHeaders[key] = value;
        });
        setMetadata(responseHeaders);

        // 解析响应体数据
        const data = await response.json();
        setProducts(data);
      } catch (error) {
        console.error('请求出错:', error);
      }
    };

    fetchProducts();
  }, []);

  return (
    <div>
      <h2>产品列表</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
      <h3>响应元数据</h3>
      <pre>{JSON.stringify(metadata, null, 2)}</pre>
    </div>
  );
}

export default ProductComponent;

方案二：使用Axios（需安装依赖） #

Axios是更易用的HTTP客户端，处理请求、响应和错误都更简洁，适合复杂场景：

1. 先安装axios：

npm install axios
# 或者用yarn
yarn add axios

2. 在组件中使用：

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

function ProductComponent() {
  const [products, setProducts] = useState([]);
  const [metadata, setMetadata] = useState({});

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await axios.get('https://example.com/products', {
          headers: {
            'Authorization': 'Token <key>', // 替换真实密钥
            'Content-Type': 'application/vnd.api+json'
          }
        });

        // Axios直接把元数据（响应头）和响应体分开存了
        setMetadata(response.headers);
        setProducts(response.data);
      } catch (error) {
        console.error('请求出错:', error);
      }
    };

    fetchProducts();
  }, []);

  return (
    <div>
      <h2>产品列表</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
      <h3>响应元数据</h3>
      <pre>{JSON.stringify(metadata, null, 2)}</pre>
    </div>
  );
}

export default ProductComponent;

如果你非要用原jQuery代码（不推荐） #

原代码有个语法错误：url后面缺了逗号，修正后可以在React里用，但需要先引入jQuery（会增加项目体积，不建议）：

1. 安装jQuery：

npm install jquery

2. 组件中使用：

import { useEffect } from 'react';
import $ from 'jquery';

function ProductComponent() {
  useEffect(() => {
    $.get({
      url: 'https://example.com/products', // 补上前缺失的逗号
      headers: { 'Authorization': 'Token <key>' },
      contentType: 'application/vnd.api+json'
    })
    .done(data => {
      console.log('产品数据:', data);
      // 获取响应元数据
      const metadata = $.ajaxSettings.xhr().getAllResponseHeaders();
      console.log('响应元数据:', metadata);
    })
    .fail(error => {
      console.error('请求失败:', error);
    });
  }, []);

  return <div>加载产品中...</div>;
}

export default ProductComponent;

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