Javascript 回应承诺，挑战一切

我有一种情况，我打了三次回访电话。每个fetch调用都有一个回调函数，该函数将更新state.twitterfeed对象的相应属性，最后更新setState。问题是，到目前为止，它正在调用setState 3次。我的目标是使用promise.all并只更新setStatus一次。我试了很多次，但都很困惑，也很有挑战性

代码：

this.state={
推特订阅：{
techcrunch:[]，
笑料：[]，
appdirect:[]
}
}
UpdateWitterFeed=（数据，用户）=>{
常量twitterfeed={…this.state.twitterfeed
};
如果（用户==“appdirect”）{
twitterfeed.appdirect=数据；
}else if（用户==“笑料”）{
twitterfeed.laughingsquid=数据；
}否则{
twitterfeed.techcrunch=数据；
}
这是我的国家({
isloadcomplete：对，
推特馈送
});
};
componentDidMount（）{
取回(
"http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=techcrunch"
)
.then（response=>response.json（））
.then（data=>this.updateWitterFeed（data，“techcrunch”）；
取回(
"http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid"
)
.then（response=>response.json（））
.then（data=>this.updateWitterFeed（data，“laughingsquid”）；
取回(
"http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect"
)
.then（response=>response.json（））
.then（data=>this.updateWitterFeed（data，“appdirect”）；
}

如果您熟悉axios库，您可以在那里使用axios.all（[]）调用方法。如上述文件所述：

function A() {
  return axios.get(url,[config]);
}

function B() {
  return axios.get(url,[config]);
}

axios.all([A(), B()])
  .then(axios.spread(function (result_A, result_B) {
    // Both requests are now complete and you can setSate here.
}));

Github：

---

//您现在可以根据需要扩展它了

您应该看看文档：

Promise.all（）

实际上保留其返回值的顺序

因此，你可以：

const promises = [];
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count =30&screen_name=techcrunch"));
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid"));
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect"));
// Execute all promises
Promise.all(promises).then(values => {
    console.log(values);
    const twitterfeed = { ...this.state.twitterfeed};
    twitterfeed.techcrunch = json.parse(values[0]);
    twitterfeed.laughingsquid = json.parse(values[1]);
    twitterfeed.appdirect = json.parse(values[2]);
    this.setState({
        isloadcomplete: true,
        twitterfeed
    });
});

---

是否有任何api依赖于每个响应？您能否解释一下为什么只想调用一次

setState

？在检索资源时更新页面似乎是有益的。所有三个fetch调用都会更新DOM中3列中的tweet。我希望它们一起更新，而不是在渲染时逐个更新。

const promises = [];
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count =30&screen_name=techcrunch"));
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid"));
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect"));
// Execute all promises
Promise.all(promises).then(values => {
    console.log(values);
    const twitterfeed = { ...this.state.twitterfeed};
    twitterfeed.techcrunch = json.parse(values[0]);
    twitterfeed.laughingsquid = json.parse(values[1]);
    twitterfeed.appdirect = json.parse(values[2]);
    this.setState({
        isloadcomplete: true,
        twitterfeed
    });
});