等待由 .fetch()、.all() 和 .() 组成的 Promise 链中的结果

Question

我正在尝试编写一个 Promise Chain。抽象地说，这是我想做的事情：

1. fetch() 来自 API 的记录。 （我的项目）
2. then() 在此记录中搜索更多 API 链接。 （在这里我找到了属于该项目的媒体的链接。每个项目可以有任意数量的媒体）。
3. all() 使用.fetch() 对这些链接中的每一个执行 API 调用
4. then() 如果之前的所有承诺都实现了，执行渲染 依赖于这些数据的函数。

这是迄今为止我为此创建的代码。

getItemWithAllMedia(request) {
    return fetch(request)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
        return data;
      })
      .then((result) => {
        let media_links = Array.from(result["o:media"], (x) => x["@id"]);
        return media_links;
      })
      .then((media_links) => {
        return Promise.all(media_links.map((url) => fetch(url)));
      })
      .then((media_response) => {
        /// debugging results from promise.all
        console.log(media_response); // (2) [Response, Response]
        console.log(media_response[0]); // Response {type: "basic", url: "XXX", redirected: false, status: 200, ok: true, …}
        console.log(media_response[0].json()); // Promise {<pending>}

        /// desired function: all responses to json and push to an array
        media_response.forEach((element) => {
          media_data.push(element.json());
        });

        /// show created array for debugging
        console.log(media_data);
        return media_data;
      })

从 cmets 可以看出，它不起作用。我只取回了未满的 Promise。我的循环当然不起作用。然后我尝试附加.then()。在Promise.all() 内部和我假设的.then() 之后。但这具有相同的结果。不幸的是，我还没有找到等待结果的方法。我当时认为应该退后一步，阅读有关 Promises 的一般信息。我是否有可能必须使用await/async 来执行此操作？但是我必须以不同的方式编写完整的功能，还是？如果有人知道这是否可以做到，那就太好了？还是应该使用 Await 和 Async 重新启动？

编辑 变量中的拼写错误并相应地更正了控制台输出。

Answer 1

忽略media_reponse 的拼写问题，您确实应该在收到回复后立即致电.json()。这样做：

  // ....
  .then((media_links) => {
    return Promise.all(media_links.map((url) => fetch(url).then(response => response.json()));
  })

这将产生一个可以解析所有数据的承诺。