如何以同步方式获取异步API数据并转为JavaScript对象？

你完全可以在异步函数外部获取并处理API返回的数据，核心是正确处理异步函数返回的Promise（你看到的Promise pending就是因为直接获取了未完成的Promise，而非最终数据）。下面是具体实现方案，同时解决多API调用的嵌套问题：

1. 基础逻辑：正确获取异步函数的返回值 #

异步函数（async标记的函数）默认返回Promise，必须通过await（需在async函数内使用）或.then()来提取最终数据，不能直接赋值使用。

示例：async/await 写法（推荐，代码更简洁） #

// 封装API请求：只负责获取数据，不处理业务逻辑
async function getWeatherData() {
  const res = await fetch('你的天气API地址');
  if (!res.ok) throw new Error(`请求失败：${res.status}`);
  return await res.json();
}

// 单独封装数据处理逻辑：和请求逻辑解耦
function handleWeatherData(data) {
  // 这里写你的业务处理，比如渲染DOM、计算数据等
  console.log('天气数据：', data);
}

// 主执行函数：统一调度请求和处理
async function runApp() {
  try {
    // 平级调用多个API，无需嵌套
    const weatherData = await getWeatherData();
    handleWeatherData(weatherData);

    // 调用其他API的示例
    const userData = await getUserData();
    handleUserData(userData);
  } catch (err) {
    // 统一捕获所有请求/处理的错误
    console.error('程序出错：', err);
  }
}

// 启动程序
runApp();

示例：.then() 链式写法（兼容旧环境） #

如果无法使用async/await，可以用Promise链式调用避免嵌套：

getWeatherData()
  .then(weatherData => {
    handleWeatherData(weatherData);
    return getUserData(); // 返回下一个API请求的Promise
  })
  .then(userData => {
    handleUserData(userData);
  })
  .catch(err => {
    console.error('程序出错：', err);
  });

2. 关键优化点：解耦请求与业务逻辑 #

• 把API请求封装成单独的函数（比如getWeatherData、getUserData），只负责发起请求、解析响应、返回数据。
• 把数据处理逻辑封装成另一个函数（比如handleWeatherData），只负责接收数据并完成业务操作。
• 用一个主函数（比如runApp）统一调度所有请求和处理，避免异步嵌套，代码结构更清晰。

3. 多API并行调用（如果API之间无依赖） #

如果多个API请求不需要依赖彼此的结果，可以用Promise.all()并行发起，提升性能：

async function runApp() {
  try {
    // 并行发起多个API请求，等待所有请求完成
    const [weatherData, userData, newsData] = await Promise.all([
      getWeatherData(),
      getUserData(),
      getNewsData()
    ]);

    // 分别处理各数据
    handleWeatherData(weatherData);
    handleUserData(userData);
    handleNewsData(newsData);
  } catch (err) {
    console.error('程序出错：', err);
  }
}

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