在循环中使用 axios 发出多个 get 请求的最佳方法是什么？

Question

我在循环中发出多个请求时遇到问题。

我正在制作一个反应应用程序，它呈现多个名为 Cards 的组件。在每张卡片内我想提出一些要求，所以我得到了这个。

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

Movies 是我从父组件获取的数组。所以显然是有效的，因为我得到了结果，但山雀总是与最后一张卡片的最后一个元素在一起。这是一张图片：

Answer 1

您是否尝试过使用 bluebird 的Promise.mapSeries？

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