Каков наилучший способ сделать несколько запросов на получение с axios в цикле?

Question

У меня проблема с выполнением нескольких запросов в цикле.

Я создаю приложение реагирования, которое отображает несколько компонентов, называемых картами. внутри каждой карты я хочу сделать несколько запросов, чтобы я получил это.

componentWillMount(){
    if(this.props.movies){ 
        let promises = []
        this.props.movies.forEach((item, i) => {
            console.log(item)
            let movieUrl = `http://localhost:3000/movies/${item}`
            promises.push(axios.get(movieUrl))
        })

        axios.all(promises).then(res => console.log(res))
    }
}

Фильмы - это массив, который я получаю из компонента отца. так, очевидно, работает, потому что я получаю результаты, но синица всегда с последним элементом последней карты. Вот изображение:

Answer 1

Вы можете использовать async/await. Посмотрите:

async componentWillMount(){
    if(this.props.movies){ 
        const results = []
        this.props.movies.forEach((item, i) => {
            const movieUrl = `http://localhost:3000/movies/${item}`
            const result = await axios.get(movieUrl)
            results.push(result)
        })
        // console.log(results)
    }
}

Answer 2

Вы должны избегать использования forEach, когда вам действительно нужно map и строить URL с item.imdbID вместо item

componentWillMount(){
    if(this.props.movies){ 
        const promises = this.props.movies.map(item => {
            const movieUrl = `http://localhost:3000/movies/${item.imdbID}`
            console.log(movieUrl)
            return axios.get(movieUrl)
        )
        Promise.all(promises).then(results => console.log(results))
    }
}

Edit1: удалено async / await из-за несовместимой конфигурации сборки Edit2: используется item.imdbID вместо item и занесенные в журнал URL

Answer 3

Вы пробовали использовать Promise.mapSeries от Bluebird ?

import Promise from 'bluebird'
componentWillMount(){
    if(this.props.movies){ 
        Promise.resolve(this.props.movies)
            .mapSeries(item => axios.get(`http://localhost:3000/movies/${item}`))
            .then(movies => console.log(movies))
    }
}