承诺链接和异步,等待

时间:2019-01-22 09:27:58

标签: reactjs

我已经坚持了一段时间。 在React组件中,我试图从3个源中获取数据,此外,获取url还要取决于另一个获取结果。然后,我想使用Promise.all函数将setState仅用于所有三个获取函数。 我试图以各种可能的方式使用async / await组合,但仍未解决。我想念什么?

class DuelDetail extends React.Component {
    state = {
        duel: [],
        dataset: [],
        algorithms: []
    };


    fetchDuel = async () => {
        var dataset = null
        const duelID = this.props.match.params.duelID;
        let duel = await axios.get(`http://127.0.0.1:8000/api/duel/${duelID}`,
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(async (res) => {
                    dataset = await this.fetchDataset(res.data.dataset)
                    return [duel, dataset]
                }
            )

    };

    fetchDataset = async (datasetId) => {
        let res = await axios.get(`http://127.0.0.1:8000/api/dataset/${datasetId}`,
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
        return res

    };

    fetchAlgorithms = () => {
        return axios.get(`http://127.0.0.1:8000/api/algorithm/`,
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
    };


    componentDidMount() {
        const promises = [this.fetchDuel()[0], this.fetchDuel()[1], this.fetchAlgorithms()]
        Promise.all(promises).then(([duelsResponse, datasetsResponse, algorithmsResponse]) => {
            this.setState({
                duels: duelsResponse.data,
                dataset: datasetsResponse.data,
                algorithms: algorithmsResponse.data
            });
        });
    }

0 个答案:

没有答案