Question

我正在尝试在reactjs中执行两次获取，然后处理结果以供显示。

我已经将我的两次提取都设置为可以解决的承诺。当我做promise.all时，它将移到.then，然后提取完成。这是下面的代码。

 const getC = fetch(api/getContacts, {
        method: 'GET',
        headers: {
           'Authorization': JSON.stringify(this.props.getLogin()),
           'Accept': 'application/json',
           'Content-Type': 'application/json',
        }
     })
     .then((res) => {
        console.log(res.status);
        res.json()
        .then(json => {
           json = json.sort(this.sortByProperty('contact_id'));
           console.log(json)
           this.setState({
              contactsLoading: false,
              contacts: json
           });
        })
     });
 const getG = fetch(api/getContacts, {
        method: 'POST',
        headers: {
           'Authorization': JSON.stringify(this.props.getLogin()),
           'Accept': 'application/json',
           'Content-Type': 'application/json'
        },
        body: JSON.stringify({group_id: this.props.group_id
        })
     })
     .then((res) => {
        res.json()
        .then(json => {
           console.log(json);
           var members = json.members.sort(this.sortByProperty('contact_id'));
           console.log(members);
           this.setState({
              name: json.name,
              memberIds: members,
           });
        })
     });
Promise.all([getG, getC])
     .then(() => {
        console.log(this.state.contacts);
        console.log(this.state.memberIds);
     });

预期输出为：
[带有项目的数组]（来自getG）
[带有项目的数组]（来自getC）
[与get C相同的数组]（在.then中）
[与获取G相同的数组]

但是我却得到了：
[空数组]
[空数组]（来自.then）

[来自getG的数组]
[来自getC的数组]

所以我试图弄清楚为什么Promise.all不在等待提取完成之前继续前进，这完全令人困惑。

Answer 1

您的getC和getG承诺实际上并不是在等待其动作完成。

您需要从外部return回调中res.json().then(...)的{{1}}内部诺言链中，使外部诺言等待该链。

这样做之后，还应该向上移动内部then()回调以减少嵌套：

then()

Promise.all在移至.then之前不等待诺言完成

1 个答案: