调用Swapi API展示角色参演电影返回[object Promise]问题求解

问题根源 #

• 所有标注async的函数默认返回Promise对象，你在同步执行的people函数里直接调用get_movies，拿到的是未完成的Promise实例，转换为文本后就是[object Promise]
• get_movies内部遍历电影链接发起的axios请求都是异步任务，没有做批量等待处理，就算等get_movies执行完也拿不到所有电影名称结果

修复后的完整代码 #

const fetch_data = async () => {
  try {
    const res = await axios.get("https://swapi.dev/api/people");
    // 等待所有角色的电影请求完成后再渲染
    await people(res.data.results);
  } catch (err) {
    console.log("请求数据出错", err);
  }
};

let people = async (data) => {
  const mainContainer = document.getElementById("myData");
  // 遍历每个角色，异步获取对应电影名称
  for (const person of data) {
    // 先渲染角色基础信息
    const div = document.createElement("div");
    div.innerHTML = `姓名：${person.name} 头发颜色：${person.hair_color} 出生年份：${person.birth_year}`;   
    mainContainer.appendChild(div);
    
    // 等待该角色所有电影名称请求完成
    const movieTitles = await get_movies(person.films);
    const p = document.createElement('p');
    p.innerText = `参演电影：${movieTitles.join('、')}`;
    mainContainer.appendChild(p);
  }
};

// 批量获取所有电影名称
let get_movies = async (movies) => {
  // 用Promise.all等待所有电影接口请求完成
  const movieRequests = movies.map(movie => axios.get(movie));
  const movieResponses = await Promise.all(movieRequests);
  // 提取所有电影标题返回
  return movieResponses.map(res => res.data.title);
}
 
fetch_data();

关键修改点 #

• 将people、get_movies函数调整为异步逻辑，所有异步请求都通过await等待执行完成后再处理返回结果，避免直接拿到Promise对象
• 用Promise.all批量等待单个角色关联的所有电影接口请求，全部请求完成后统一提取电影标题返回
• 调整渲染顺序：先渲染角色基础信息，等电影名称全部获取完毕后再插入对应的文本节点到页面，不会出现Promise占位的异常文本

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