Javascript 为什么我的搜索功能这么慢+；有时候有马车？

我最初只有一个URL来获取数据，我的应用程序工作得非常完美。但后来我意识到我必须使用两个不同的URL来获取所需的数据。所以我稍微修改了一下代码。除了

getData

函数外，其他一切都差不多，我使用

map

迭代URL列表并获取数据。我的应用程序现在真的有问题了

问题：

当我搜索拖缆时，它有时从不在页面上呈现结果。即使

此.state.value

现在不等于

”

，消息

“搜索您喜爱的拖缆！”

也不会消失。但是当我改变输入时，它会被渲染出来

它有时无法呈现所获取的数据，我得到的

FinderResultContainer

呈现时没有数据。（没有名字，没有img，没有离线/在线。）

这里到底发生了什么？我觉得这是因为我没有使用组件生命周期方法。如果是这样，那么我到底需要做什么？我是一个完全的初学者，所以我需要一些指导

getData(value) {
let streamerData = [];
let streamerInfo = {};

let urls = ['https://wind-bow.gomix.me/twitch-api/streams/' + value, 'https://wind-bow.gomix.me/twitch-api/users/' + value];

urls.map(function(each, index) {
  fetch(each).then((response) =>
  response.json()
).then((streamer) => streamerData.push(streamer)).then(()=>streamerInfo[index]=streamerData[index]).then(()=>{if (index === urls.length-1){this.setState({streamer: streamerData})}})},this)
}

---

fetch

是异步的，它返回一个承诺，因此您不知道具体何时完成。您可以使用

Promise.all（）

等待每个承诺解析，然后处理数据（请注意，所有承诺都将同时执行，因此，如果您有大量URL列表，您将每秒发送大量请求）

编辑：我看到了你的笔并简化了代码，这对我来说很好。 这里没有空白组件。请注意，返回承诺时只需使用

然后

getData(value, type) {
  let urls = [
    'https://wind-bow.gomix.me/twitch-api/streams/' + value,
    'https://wind-bow.gomix.me/twitch-api/users/' + value
  ];

  const getJson = url => fetch(url).then(res => res.json());

  Promise.all(urls.map(getJson))
    .then(streamer => {
      if (type === "search") {
        this.setState({ streamer });
        console.log("searching")
      } else {
        console.log("displaying");
        this.getStreamer(streamer[0], streamer[1]);
      }
    }).catch(err => {
      console.log('Something went wrong...')
    })
}

---

由于您正在执行两个ajax调用（我猜它们是ajax调用），因此您可能应该使用一个函数，在执行最后一件事情之前等待所有调用的响应。使用承诺，因为Web API本质上是异步的。请尝试Library真棒，非常感谢。有没有其他方法可以达到同样的效果？我看到它不支持I.E.I.Promise.all（url.map（函数（每个，索引）{fetch（每个）。然后（（响应）=>response.json（））。然后（（拖缆）=>streamerData.push（拖缆））。然后（（）=>streamerInfo[index]=streamerData[index]）。然后（（）=>{if（索引===url.length-1）{this.setState（{streamer:streamerData}}}），这个））}并且它有时仍然呈现空白组件。。嗯，对于IE8的支持，你需要一个我清理了一点代码，删除了不必要的变量。