Calling fetch() on multiple URLs using Promise.all

Question

I am attempting to fetch JSON data on multiple URLs. The URL is a single fixed string with unique keys concatenated at the end. These keys are supplied as an array which I'm iterating over using map(). The resulting data is passed into Promise.all(), but undefined is returned. I can't for the life of me figure out why?

export const fetchApiEvents = async eventIds => {
    try {
        const events = await Promise.all(eventIds.map(id => {
            fetch('http://api_url/events/' + id)
                .then(res => res.json())
        }))
        return events
    } catch (e) {
        console.log('An error occured fetching the events: ', e)
    }
}

Then I'm calling this function as an effect:

    useEffect(() => {
        fetchApiEvents(eventIds)
            .then(response => setEvents(response))
    }, [eventIds])

Am I doing something really stupid?

Does your console logging reveal anything?

Benjamin Eckardt
– Benjamin Eckardt

2020-06-01 21:51:07 +00:00
Commented Jun 1, 2020 at 21:51 — Benjamin Eckardt
– Benjamin Eckardt, Commented Jun 1, 2020 at 21:51

Benjamin Eckardt · Accepted Answer · 2020-06-01 21:48:37Z

1

return is missing in line 4:

export const fetchApiEvents = async eventIds => {
    try {
        const events = await Promise.all(eventIds.map(id => {
            return fetch('http://api_url/events/' + id)
                .then(res => res.json())
        }))
        return events
    } catch (e) {
        console.log('An error occured fetching the events: ', e)
    }
}

answered Jun 1, 2020 at 21:48

Benjamin Eckardt

7286 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling fetch() on multiple URLs using Promise.all

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related