Блог

Я делаю http — запросы. Когда запрос выполнен — с обратным вызовом я вызываю другую функцию, в которой данные асинхронного вызова необходимы для создания моей логики. При каждом вызове моего http — запроса lazyLoadData я делаю запросы на новую страницу для данных-так, страница 1 с 25 записями, страница 2 со следующими 25 записями из бэкенда и т. Д…

 getData() {
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
}

lazyLoadData(cb?) {
  // MY HTTP REQUESTS
  let response = axios...
  cb amp;amp; cb();
}


testing(data) {
  // my data arraived
}
 

если я позвоню только один раз

 this.lazyLoadData(this.testing.bind(this));
 

тогда everytjing работает нормально, когда выполняется http-запрос, callback - the testing functions вызывается my, и я получаю данные.

Но когда я звоню, например

два или более раз

 getData() {
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
}
 

иногда вызываю 2 — второй this.lazyLoadData(this.testing.bind(this)); выполняется быстрее, чем первый, и я путаю свои данные. Потому что после того, как я делаю http-запрос и получаю, я помещаю эти значения в один глобальный массив, которым заполнена моя таблица.

И данные не в порядке, поэтому иногда массив содержит сначала данные 25 records со страницы 2, затем со страницы 1, страницы 3 и т.д…

Как я могу это предотвратить ?

Да, вы не можете вызывать их последовательно, потому что скорость HTTP-запросов зависит от многих факторов.

Вы можете использовать функцию async/await для решения вашей проблемы.

async ключевое слово всегда возвращает обещание, поэтому вы можете объединить его с await ключевым словом, чтобы указать Javascript подождать, пока ваше обещание будет либо выполнено, либо отклонено.

Поэтому для вашего кода вы могли бы сделать что-то вроде этого

 async function lazyLoadData(){
  //http requests
}
 

в getData вы могли бы просто :

    function getData(){
        // with this, the firstResponse variable will wait for the first call of lazyLoadData to be completed then assigned the value to itself 
        // before the execution move to the second call of the function
        let firstResponse = await lazyLoadData(yourparam)
        let secondResponse = await lazyLoadData(yourparam)
    }
 

Возможно, вы также захотите прочитать о Promise.all, так как это может быть альтернативой моему решению.