【问题标题】:Single async function that makes multiple fetches and returns results? [duplicate]进行多次获取并返回结果的单个异步函数? [复制]
【发布时间】:2019-03-04 13:41:12
【问题描述】:

我正在尝试编写一个异步函数,该函数进行多次提取,等待全部完成,然后将 JSON 结果作为数组返回。这是我目前所拥有的:

file1.js

const searchResults = await Api.search(searchText);

api.js

async function search(searchText) {
    return util.executeFetchAll([
        `/searchA/${searchText}`,
        `/searchB/${searchText}`,
        `/searchC/${searchText}`
    ]);
}

util.js

async function executeFetchAll(urls) {
    const promises = urls.map(url => fetch(url));
    const responses = await Promise.all(promises);

    debugger;
}

当执行在调试器处暂停并且我使用 Chrome 的开发工具检查 responses 时,它正确地是 3 个 Response 对象的数组,但如果我检查 responses[0].json(),它会奇怪地在控制台中返回 Promise {<pending>}对象。

我错过了什么?我正在等待Promise.all,这应该意味着所有承诺都在我的调试器行之前解决。那么为什么 json() 方法奇怪地显示 Promise 对象处于挂起状态?

谢谢。

【问题讨论】:

    标签: javascript json promise async-await fetch


    【解决方案1】:

    response.json() 返回一个承诺!见:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

    所以你可以用这样的方式等待他们:

    await Promise.all(responses.map(r => r.json()));
    

    【讨论】:

    • 谢谢。但我想我想知道为什么在我致电await Promise.all(...) 之后,这些承诺仍然悬而未决。为什么在我们点击调试器的下一行,它们仍会显示为待处理?难道他们不应该在等待线完成时解决吗?
    • 另外,抱歉,我刚刚注意到,我正在尝试将 Promise.all 分配responses,但您在 Promise.all 中使用了 responses,作为论据。您能否在我的代码示例的上下文中澄清执行顺序?谢谢。
    • 首先,您等待来自服务器的响应 (fetch),然后等待从 json (.json) 转换有效负载。两个返回函数都返回一个承诺。让我重写我的例子来帮助你:const responses = await Promise.all(promises); const jsonPromises = responses.map(r => r.json()); const objects = await Promise.all(jsonPromises);
    • 感谢重写!
    • 尝试了您之前评论中的更新示例,但 objects 最终变为:[false, false, false]
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多