在由.fetch()、.all() 和.() 组成的promise 链中等待结果然后

Question

I'm trying to write a Promise Chain. This is abstractly speaking what I want to do:

1. fetch() a record from an API. (My Item)
2. then() Search in this record for more API links. (Here I find the links to the media that belong to the item. Each item can have any number of media).
3. all() Execute an API call for each of these links with .fetch()
4. then() if all previous promises are fulfilled, execute the render function that depends on this data.

This is the code I have created for this so far.

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

As you can see from the comments, it doesn't work. I only got back the underfilled Promise. With which my loop of course does not work. I then tried to append .then() . Both inside Promise.all() and after the .then() in which I assumed it. But this has the same result. Unfortunately, I have not found a way how I can wait for the result. I thought then should go back a step and read about Promises in general. Is it possible that I have to do this with await / async ? But then I have to write the complete function differently or? It would be great if someone knows if this can be done? Or should I restart with Await and Async?

EDIT Spelling error in the variable and accordingly corrected the console output.

Answer 1

Ignoring the fact that you have a spelling issue with media_reponse , you should really call .json() on the response as soon as you have it. So do:

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

This will produce a promise that resolves to all the data.