Question

我遇到了三个调用的情况。每个提取调用都有一个回调函数，该函数将更新state.twitterfeed对象的相应属性，最后更新setState。问题是，到目前为止，它正在调用setState 3次。我的目的是只使用promise.all并更新一次setStatus。我尝试了多次，但它令人困惑和挑战。

代码：

this.state = {
  twitterfeed: {
    techcrunch: [],
    laughingsquid: [],
    appdirect: []
  }
}

updateTwitterFeed = (data, user) => {
  const twitterfeed = { ...this.state.twitterfeed
  };
  if (user === "appdirect") {
    twitterfeed.appdirect = data;
  } else if (user === "laughingsquid") {
    twitterfeed.laughingsquid = data;
  } else {
    twitterfeed.techcrunch = data;
  }
  this.setState({
    isloadcomplete: true,
    twitterfeed
  });
};

componentDidMount() {
  fetch(
      "http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=techcrunch"
    )
    .then(response => response.json())
    .then(data => this.updateTwitterFeed(data, "techcrunch"));

  fetch(
      "http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid"
    )
    .then(response => response.json())
    .then(data => this.updateTwitterFeed(data, "laughingsquid"));

  fetch(
      "http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect"
    )
    .then(response => response.json())
    .then(data => this.updateTwitterFeed(data, "appdirect"));
}

Answer 1

如果您熟悉 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：https://github.com/axios/axios

Answer 2

     var promise1 = fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count =30&screen_name=techcrunch");

     var promise2 = fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid");

     var promise3 =fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect");

     Promise.all([promise1, promise2, promise3]).then(function(values) {
        console.log(values);
    });

//您现在可以根据需要对其进行扩展

Answer 3

您应该看一下文档：Promise.all()

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
    });
});

反应Promise.all挑战

3 个答案: