Question

我正在尝试将方法包裹在异步方法上。除非您使用await，否则其他操作不会等待异步方法。

for循环呢？打字稿是否继续等待for循环完成？

示例：

   mergeQueries(start, end) {
     for (let i = 0; i < end.length; i++) {
        if ((start.includes(end[i].id)) && (!this.dontShowList.includes(end[i].id))) {
            this.allItineraries.push({
              id: end[i].id,
              startDate: end[i].startDate,
              endDate: end[i].endDate,
              userId: end[i].userId,
            });
        }
     }
     if (this.allItineraries.length < 1) {
       console.log('presentAlertInformation');
       this.presentAlertInformation();
     }
   }

在查询结束时，我想在for循环后评估this.allItineraries。如果要处理成千上万的用户，则可能需要一段时间。如果长度小于1，我想发出警报，但是会等到for循环完成吗？

Answer 1

这与TypeScript无关，但是如果您希望等待循环中每个异步活动的完成，则可以选择for-await...of loop。这是我知道的唯一在实际循环中“暂停”执行的循环。也就是说，无需使用循环将一堆promise放入数组中，然后使用Promise.all / bluebird.reflect或类似的东西解析集合的每个成员。

注意：：显然，StackOverflow的“代码段”实现的babel配置会对此造成影响，但是here it is on StackBlitz。

class App extends React.Component {
  state = {
    list: null
  };
  componentDidMount() {
    (async () => {
      const iterable = [
        simulateLongRunning(1),
        simulateLongRunning(2),
        simulateLongRunning(3)
      ];
      let list = [];
      for await (let item of iterable) {
        list = list.concat(<li>{item}</li>);
      }
      this.setState({ list });
    })();
  }
  render() {
    return (
      <div>
        {!this.state.list ? "not finished yet" : <ol>{this.state.list}</ol>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Typescript在执行下一个代码之前会等待循环完成吗？

1 个答案: