首页 > 解决方案 > 即使使用 async/await 方法,Promise 也未决

问题描述

我有一个服务类,它有一个从 api 获取数据的方法:

class TenderTableService{
    fetchOngoingTenders =  async ()   =>  {
        const response = await fetch('http://127.0.0.1:5000/api/tender/');
        let tenderList: Array<Tender> = (JSON).parse(await response.json());
        return tenderList;
    };
}

export default TenderTableService;

此类方法从另一个文件中使用,如下所示:

    const tenderTableService : TenderTableService = new TenderTableService();
    const tenderList= tenderTableService.fetchOngoingTenders();
    console.log(tenderList); // -> Promise { <state>: "pending" }

我不知道如何防止变量表单返回挂起状态

标签: typescriptpromiseasync-await

解决方案


那是因为tenderTableService.fetchOngoingTenders();返回了一个 Promise,因为它实际上是一个异步函数。如果你想访问tenderList,你可以通过链接.then()它来实现,即:

const tenderTableService : TenderTableService = new TenderTableService();
tenderTableService.fetchOngoingTenders().then((tenderList) => {
    // Do something with tenderList here
});

...这意味着处理 值的所有逻辑tenderList都需要包含在.then()回调中。如果您上面的代码也包含在一个函数中,那么您可以将其转换为异步函数并使用 await:

async function yourFunction() {
    const tenderTableService : TenderTableService = new TenderTableService();
    const tenderList = await tenderTableService.fetchOngoingTenders();

    // Do something with tenderList here
}

推荐阅读