How do i use fetch with a result from a fetch in the same function with sync await

Question

the promise creates an array like this, taken from the console:

(6) [Promise, Promise, Promise, Promise, Promise, Promise]
0: Promise {<fulfilled>: undefined}
1: Promise {<fulfilled>: undefined}
2: Promise {<fulfilled>: undefined}
3: Promise {<fulfilled>: undefined}
4: Promise {<rejected>: SyntaxError: Unexpected token < in JSON at position 0}
5: Promise {<fulfilled>: undefined}
length: 6

which cannot be used.

the code is this:

export default async function getData() {
  let response = await request('http://localhost:2000/api/ves.json').then((data) => fetch(data));
  
  let store = await response.json();
  let list = await  store.map(async (input, index)=>{
    let details = await request(`http://localhost:2000/api/${input.id}.json`).then((data) => fetch(data));
   let foo = await details.json();
   console.log(foo);
    input = await {...input, ...foo};
  });
  
  return  list;
}

at the point, the list is returned (when the useData function is used) the mapping seems to have not finished. So it returns "promise" instead of the list it should.

The aim is to combine the objects. This is don't by using information from the first object (in an array of objects) to get information from the second object. Then pushing the second object into the first one at the same point in the array the information was retrieved to get the second object.

The same problem appears if I also do either

    input = await {...input, ...foo};
  }});
  await Promise.all(list)
  return  list;

or

   console.log(foo);
    input = await {...input, ...foo};
  }});
  let fish = await Promise.all(list)
  return  fish;

gives the console error

(6) [undefined, undefined, undefined, undefined, undefined, undefined]

this useData function is called in a react page through this.

  const [ves] = useData();

      useEffect(()=>{
    
        console.log(ves);
      },[ves])

await Promise.all(list) should wait for all Promises in the mapped array. — zero298
– zero298, Commented Aug 26, 2021 at 1:39
replacing "return list;" with let newList = await Promise.all(list) return newList; has the same problem — Alexander Hemming
– Alexander Hemming, Commented Aug 26, 2021 at 11:45

zero298 · Accepted Answer · 2021-08-26 14:04:24Z

You aren't returning anything in your .map function. You also need to use Promise.all() on the array of promises that the .map will return (since the function you are passing it is async which means it will always wrap the return in a Promise.

Also, input = await {...input, ...foo}; doesn't really make sense to me. You await promises, not synchronous value assignments.

export default async function getData() {
  let response = await request('http://localhost:2000/api/ves.json').then((data) => fetch(data));

  let store = await response.json();
  let list = store.map(async(input, index) => {
    let details = await request(`http://localhost:2000/api/${input.id}.json`).then((data) => fetch(data));
    let foo = await details.json();
    console.log(foo);
    // Have to return something within the .map
    return {
      ...input,
      ...foo
    };
  });
  
  // Have to wait for all the mapped promises to resolve
  const resolvedList = await Promise.all(list);

  return resolvedList;
}

There is another issue in that you don't .catch any of the errors that might be happening during the fetch. I see

Promise {<rejected>: SyntaxError: Unexpected token < in JSON at position 0}

Which means one of the API is returning HTML instead of JSON which causes .json() to throw.

Array.prototype.map() is sort of a combinatorial function. It iterates an array, processes the values of that array, and returns a new array of the same size with processed values. Think of it literally as a way to map values to another value.

In your example, you are trying to map network responses to additional network requests. If you don't return, the implication is "I don't care about the processed values", at which point you might as well use .forEach.

You do care about the responses. So you should return values in the map function (the return values are promises that resolve to data) and then Promise.all() that mapped array so that it unwraps to an array of actual data.

Is there a reason for returning after the awaited Promise or a reason why return await Promise.all(list) wouldnt work?
@DᴀʀᴛʜVᴀᴅᴇʀ No, but I want it to be clear to the OP. I think the succinct syntax may have been what was tripping them up in the first place.
as stated in the edit to the comment, this suggestion doesn't work, and directly copy and pasting what you have written does not work. Sorry, I'm still stuck with this point. I had actually tried the promise.all() before this question.
@AlexanderHemming Yes, but there is more wrong than just the Promise.all like actually returning something from the .map which was another error. That was why you got an array of [undefined, undefined, undefined].

Collectives™ on Stack Overflow

How do i use fetch with a result from a fetch in the same function with sync await

1 Answer 1

11 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Related