调用async/await方法仍返回Promise pending状态的问题求助

嘿，我明白你碰到的问题了——调用fetchOngoingTenders()后直接拿到的是处于pending状态的Promise，这其实是async函数的默认特性：所有async函数都会返回一个Promise对象，你直接赋值的话只是拿到了这个待完成的Promise容器，而不是它最终resolve出来的实际数据。

先帮你理清楚问题根源：你的fetchOngoingTenders是async方法，调用它的瞬间并不会立刻返回招标数据，而是返回一个Promise，它会在后台完成API请求后，再把数据传递给你。所以直接打印这个Promise，看到的就是pending状态。

下面给你两种常用的解决方式，选你觉得顺手的就行：

方式一：用async/await（推荐，代码更简洁易读） #

await关键字专门用来等待Promise完成，但它有个限制——只能在async函数内部使用。所以你需要把调用代码放到一个async函数里：

// 封装成一个async函数
async function loadTenderData() {
  const tenderTableService: TenderTableService = new TenderTableService();
  // 用await等待Promise完成，拿到实际数据
  const tenderList = await tenderTableService.fetchOngoingTenders();
  console.log(tenderList); // 这里就能打印出真正的招标数组了
}

// 执行这个函数
loadTenderData();

如果是在前端框架里（比如React/Vue），举个React useEffect的例子：

import { useEffect } from 'react';

// 组件里的用法
useEffect(() => {
  // 在useEffect内部定义async函数
  async function fetchTenders() {
    const service = new TenderTableService();
    const list = await service.fetchOngoingTenders();
    console.log(list);
    // 这里可以把list存到组件状态里，比如setTenders(list)
  }
  fetchTenders();
}, []); // 空依赖数组确保只执行一次

方式二：用Promise的.then()链式调用 #

如果你暂时不想用async/await，也可以通过Promise的.then()方法来处理成功后的结果，还能顺便用.catch()捕获错误：

const tenderTableService: TenderTableService = new TenderTableService();
tenderTableService.fetchOngoingTenders()
  .then(tenderList => {
    console.log(tenderList); // 这里拿到实际的招标数据
  })
  .catch(error => {
    // 别忘了处理请求失败的情况，比如网络错误、API返回错误
    console.error('获取招标数据失败:', error);
  });

另外，顺便给你提个小优化：你的fetchOngoingTenders方法里有个小问题——response.json()本身已经是Promise，而且它会自动解析JSON，不需要再用JSON.parse()包裹，改成这样更规范，还能增加错误处理：

fetchOngoingTenders = async () => {
  const response = await fetch('http://127.0.0.1:5000/api/tender/');
  // 先检查请求是否成功（状态码200-299）
  if (!response.ok) {
    throw new Error(`请求失败，状态码: ${response.status}`);
  }
  // 直接用await response.json()拿到解析后的数组
  let tenderList: Array<Tender> = await response.json();
  return tenderList;
};

这样修改后，不仅代码更正确，还能在API返回错误状态时抛出错误，方便你后续用try/catch或者.catch()捕获处理。

内容的提问来源于stack exchange，提问作者Øystein Seel