如何从getData.js获取Axios请求响应并在App.js中展示

第一步：改造getData.js，导出可复用的数据请求函数 #

原代码存在几个问题需要修复：

• int_access_token未从token接口响应中提取
• int_personData未定义
• 嵌套then写法不利于维护，且没有导出接口给外部调用

改造后的代码如下：

// getData.js
import axios from 'axios';

// 替换为你的实际接口地址，也可以改为参数传入以提升灵活性
const token_url = '你的Token接口地址';
const get_data_url = '你的数据接口地址';

// 导出一个异步函数，返回请求到的数据
export const fetchTargetData = async () => {
  try {
    // 1. 请求获取Token
    const tokenResponse = await axios.post(token_url, { grant_type: 'client_credentials' }, {
      headers: {
        "Authorization": `Basic ${Buffer.from(`${process.env.int_client_id}:${process.env.int_client_secret}`).toString('base64')}`,
        "Content-Type": 'application/x-www-form-urlencoded'
      }
    });

    // 从Token响应中提取access_token，字段名根据实际接口返回调整
    const accessToken = tokenResponse.data.access_token;
    // 补充你的实际请求参数，比如要提交给数据接口的person数据
    const personData = { /* 你的请求参数，比如name, id等 */ };

    // 2. 使用Token请求目标数据
    const dataResponse = await axios.post(get_data_url, personData, {
      headers: {
        "Authorization": `Bearer ${accessToken}`
      }
    });

    // 返回最终获取到的数据
    return dataResponse.data;
  } catch (error) {
    console.error('数据请求失败:', error);
    // 抛出错误让调用方处理
    throw error;
  }
};

第二步：在App.js中导入函数并获取、展示数据 #

根据你的项目类型，有不同的实现方式：

情况1：普通JavaScript项目 #

// App.js
import { fetchTargetData } from './getData.js';

// 页面加载完成后调用函数
document.addEventListener('DOMContentLoaded', async () => {
  try {
    const data = await fetchTargetData();
    // 将数据展示到页面，比如插入到指定容器
    const dataContainer = document.getElementById('data-display');
    // 用JSON格式化展示，也可以根据数据结构生成自定义HTML
    dataContainer.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
  } catch (error) {
    document.getElementById('data-display').textContent = `加载失败: ${error.message}`;
  }
});

情况2：React项目 #

// App.js
import { useState, useEffect } from 'react';
import { fetchTargetData } from './getData.js';

export default function App() {
  const [targetData, setTargetData] = useState(null);
  const [loadError, setLoadError] = useState(null);

  useEffect(() => {
    // 异步加载数据
    const loadData = async () => {
      try {
        const data = await fetchTargetData();
        setTargetData(data);
      } catch (err) {
        setLoadError(err.message);
      }
    };

    loadData();
  }, []);

  return (
    <div>
      {loadError && <p className="error">加载出错: {loadError}</p>}
      {targetData ? (
        <pre>{JSON.stringify(targetData, null, 2)}</pre>
      ) : (
        <p>数据加载中...</p>
      )}
    </div>
  );
}

关键说明 #

• 确保process.env.int_client_id和process.env.int_client_secret已正确配置，能正常读取环境变量
• 接口返回的access_token字段名可能与示例不同，请根据实际接口文档调整
• personData需要替换为你实际要提交给数据接口的参数

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