Будет ли машинопись ждать завершения al oop перед выполнением следующего кода?

Question

Я пытаюсь обернуть голову вокруг асин c методов. Другие действия не ждут asyn c методов, если вы не используете await.

А как насчет циклов? Ожидает ли машинопись для завершения l в течение l oop, прежде чем продолжить?

Пример:

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

в конце запроса, я хотел бы оценить this.allItineraries после для l oop. Это может занять некоторое время, если он обрабатывает десятки тысяч пользователей. если длина <1, я хотел бы представить предупреждение, но будет ли оно ждать до завершения операции l oop? </p>

Answer 1

Это не имеет ничего общего с TypeScript, но если вы будете sh ждать завершения каждого асинхронного действия в пределах al oop, for-await ... l oop это вариант. Это единственный l oop, о котором я знаю, чтобы «приостановить» выполнение в рамках фактического l oop. То есть, не используя al oop для pu sh связку обещаний в массив, затем разрешите каждый член коллекции с помощью Promise.all / bluebird.reflect или чего-то еще.

ПРИМЕЧАНИЕ: Очевидно, что конфигурация babel реализации «фрагмента» StackOverflow будет подавлена ​​этим, но здесь это на 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" />