如何在ReactJS前端调用Node.js后端的Axios all接口获取数据？

前端问题修复 #

axios.get() 是异步函数，直接赋值变量会得到一个未完成的Promise，所以你看到Promise { <state>: "pending" }。必须通过async/await或者.then()语法等待Promise完成，才能拿到实际数据。

正确写法1：async/await + useEffect #

React组件函数不能直接标记为async，需在useEffect里封装异步逻辑：

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

function From () {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('http://localhost:5000/arrival');
                // 拿到后端返回的实际数据
                setData(response.data);
                console.log(response.data);
            } catch (err) {
                setError(err.message);
                console.error('请求失败:', err);
            }
        };

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

    return (
        <div>
            {error && <p>错误：{error}</p>}
            {data && (
                <div>
                    <h3>用户信息</h3>
                    <p>用户名：{data.user.login}</p>
                    <p>仓库数量：{data.repos.length}</p>
                </div>
            )}
        </div>
    );
}

正确写法2：.then()链式调用 #

如果习惯传统Promise写法，也可以用链式调用处理：

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

function From () {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        axios.get('http://localhost:5000/arrival')
            .then(response => {
                setData(response.data);
                console.log(response.data);
            })
            .catch(err => {
                setError(err.message);
                console.error('请求失败:', err);
            });
    }, []);

    // 渲染逻辑同上
}

后端代码优化 #

你的后端代码存在两个问题：一是混用await和.then()导致可读性差，二是未接收req/res参数，无法向前端返回响应。优化后的代码如下：

import axios from 'axios';

export async function getArrivalPorts(req, res) { // 必须接收req和res参数
    const endpoints = [
        'https://api.github.com/users/ejirocodes',
        'https://api.github.com/users/ejirocodes/repos',
        'https://api.github.com/users/ejirocodes/followers',
        'https://api.github.com/users/ejirocodes/following'
    ];

    try {
        // 等待所有请求完成
        const responses = await axios.all(endpoints.map(endpoint => axios.get(endpoint)));
        // 解构每个响应的data
        const [userRes, reposRes, followersRes, followingRes] = responses;
        const result = {
            user: userRes.data,
            repos: reposRes.data,
            followers: followersRes.data,
            following: followingRes.data
        };
        // 向前端返回JSON格式数据
        res.json(result);
    } catch (errors) {
        console.error('GitHub API请求失败:', errors);
        // 返回错误状态码和信息
        res.status(500).json({ error: '数据获取失败' });
    }
}

内容的提问来源于stack exchange，提问作者Josip Marić