在由 .fetch()、.all() 和 .() 组成的承诺链中等待结果 then

Question

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

fetch() 来自 API 的记录。（我的项目）
then() 在此记录中搜索更多 API 链接。（在这里我找到属于该项目的媒体链接。每个项目可以有任意数量的媒体）。
all() 使用 .fetch()
then()如果前面所有的promise都满足了，执行render 依赖于此数据的函数。

这是我目前为此创建的代码。

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;
      })

从评论中可以看出，是不行的。我只取回了未填充的 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()));
  })

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

在由 .fetch()、.all() 和 .() 组成的承诺链中等待结果 then

Waiting for result in promise chain consisting of .fetch(), .all() and .()then

javascript

async-await

es6-promise