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

Question

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

我正在制作一个可渲染多个称为Cards的组件的react应用。我想在每张卡中提出一些要求，所以我明白了。

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而不是item.imdbID构建URL时，应该避免使用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：由于不兼容的构建配置而删除了异步/等待 Edit2：使用item.imdbID代替item并记录了网址

Answer 3

您是否尝试过使用蓝鸟的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))
    }
}