Question

我需要调用一堆API，并将它们的响应数据映射到相应的数据源。我可以使用对API的单独fetch()调用来做到这一点。但是，我想使用Promise.all()从所有API加载数据，然后再在应用程序中显示它们。但是，我无法成功完成此操作。以下是代码段：

componentDidMount() {
        this.fetchAPIs(); //function to call APIs
        this.loadFontAsync(); //function to load custom font
    }

    fetchAPIs = async () => {
        console.log('Fetching APIs')

        await Promise.all([
            fetch('http://192.168.0.111:8080/endpoint1', {
                method: 'post',
                mode: 'cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({
                    "customerNo": this.state.custId,
                })
            }),
            fetch('http://192.168.0.111:8080/endpoint2', {
                method: 'post',
                mode: 'cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({
                    "customerNo": this.state.custId,
                })
            }),
            fetch('http://192.168.0.111:8080/endpoint3', {
                method: 'get',
                mode: 'cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-type': 'application/json'
                }
            }),
            fetch('http://192.168.0.111:8080/endpoint4', {
                method: 'post',
                mode: 'cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-type': 'application/json'
                }
                ,
                body: JSON.stringify({
                    "customerNo": this.state.custId,
                })
            })
        ])
            .then((response) => Promise.all(response.map(res => res.json())))
            .then((response) => {
                this.setState({
                    //mapping response to dataSources chronologically
                    dataSource3: response[0],
                    dataSource1: response[1],
                    dataSource2: response[2],
                    dataSource4: response[3],
                    isLoading: false    // to check if APIs are loaded
                })
            })
            .catch((error) => {
                Alert.alert("Promise not fulfilled");
                console.error(error);
            });
    }

当我检查托管API的服务器中的日志时，执行此代码对任何端点都没有影响。有人可以建议我所缺少的吗？

使用Promise.all（）进行多个fetch（）调用不起作用

0 个答案: