React/JS调用双API获取电影列表，如何获取Promise中的实际数组结果

核心原因：所有async函数的返回值都是Promise对象，哪怕内部用了await，外部调用时必须处理这个Promise才能拿到实际结果。

一、React组件中的正确写法（推荐） #

在React组件里，不能直接在顶层使用await，需要结合useState（存储数据）和useEffect（执行异步操作）：

import { useState, useEffect } from 'react';
import { fetchMovies } from './你的文件路径';

function MovieList() {
  // 用状态存储电影数组
  const [movies, setMovies] = useState([]);
  // 加载状态，避免渲染空数据
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 在useEffect内部定义async函数
    const loadMovieData = async () => {
      // 用await获取fetchMovies返回的实际数组
      const movieArray = await fetchMovies();
      setMovies(movieArray);
      setIsLoading(false);
    };

    loadMovieData();
  }, []); // 空依赖数组确保组件挂载时只执行一次

  if (isLoading) {
    return <div>加载电影中...</div>;
  }

  return (
    <div className="movie-list">
      {/* 遍历渲染电影数据 */}
      {movies.map(movie => (
        <div key={movie.imdbID} className="movie-item">
          <h3>{movie.Title}</h3>
          <p>年份：{movie.Year}</p>
        </div>
      ))}
    </div>
  );
}

export default MovieList;

二、理解为什么原代码拿不到数组 #

你主组件中的const movies = getMovies();，因为getMovies是async函数，所以movies本质是一个Promise对象，而非实际的电影数组。要拿到内部结果，要么用await（必须在async函数内），要么用.then()：

// 用.then()处理Promise
getMovies().then(movieArray => {
  console.log(movieArray); // 这里拿到实际的12部电影数组
});

三、优化请求效率（可选） #

你的fetchMovies当前是串行请求12次（每次等上一个请求完成再发下一个），可以改成并行请求提升速度：

const getMovie = async () => {
  const omdpURL = "http://www.omdbapi.com/?apikey=xxxxxx&t="; // 去掉多余的i参数，避免冲突
  const randomMovieRes = await fetch("https://k2maan-moviehut.herokuapp.com/api/random");
  const randomMovie = await randomMovieRes.json();
  const movieRes = await fetch(omdpURL.concat(randomMovie.name));
  return movieRes.json();
}

export const fetchMovies = async() => {
  // 一次性生成12个请求Promise
  const moviePromises = Array.from({ length: 12 }, () => getMovie());
  // 并行等待所有请求完成，返回结果数组
  return Promise.all(moviePromises);
}

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