如何解决依赖前序API的嵌套调用返回Promise而非目标数据的问题

问题根因 #

JS中所有被async关键字声明的函数，返回值默认是Promise类型，就算你在函数内部已经await拿到了最终结果，直接调用函数拿到的也会是已fulfilled状态的Promise，需要通过await或者.then()方法才能拿到实际返回的电影详情数据。

代码优化 #

原有逻辑本身可以跑通，但嵌套的内部getMovieById没有必要，同时补充了随机索引生成、异常处理逻辑，优化后更易维护：

// api.js
const apiKey = '你的实际TMDB接口密钥';
// 生成有效随机索引，避免数组越界
function getRandomIndex(max) {
  return Math.floor(Math.random() * max);
}

export async function getMovieDetail() {
  try {
    // 第一步：获取热门列表，取随机电影ID
    const trendingRes = await fetch(`https://api.themoviedb.org/3/trending/all/day?api_key=${apiKey}`);
    const trendingData = await trendingRes.json();
    const randomMovieId = trendingData.results[getRandomIndex(trendingData.results.length)].id;

    // 第二步：通过ID查询电影详情
    const detailRes = await fetch(`https://api.themoviedb.org/3/movie/${randomMovieId}?api_key=${apiKey}&language=en-US`);
    const movieDetail = await detailRes.json();

    return movieDetail;
  } catch (err) {
    console.error('获取电影详情失败:', err);
    throw err;
  }
}

组件中调用的正确写法 #

异步函数内调用 #

在async包裹的函数内加await关键字即可直接拿到真实数据：

import { getMovieDetail } from './api.js'

async function loadMovieData() {
  const movieDetail = await getMovieDetail();
  // 此处movieDetail就是实际的电影详情对象
  console.log(movieDetail);
}

loadMovieData();

非异步环境调用 #

用.then()链式调用获取结果：

import { getMovieDetail } from './api.js'

getMovieDetail().then(movieDetail => {
  // 回调内获取实际电影详情
  console.log(movieDetail);
}).catch(err => {
  // 自定义请求错误处理逻辑
})

框架组件示例（React） #

import { useEffect, useState } from 'react';
import { getMovieDetail } from './api.js';

function MovieInfoCard() {
  const [movieDetail, setMovieDetail] = useState(null);

  useEffect(() => {
    const fetchMovie = async () => {
      const data = await getMovieDetail();
      setMovieDetail(data);
    }
    fetchMovie();
  }, [])

  return <div>电影名称：{movieDetail?.title}</div>
}

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