Блог

Главная - Вопросы по программированию - Одновременное выполнение нескольких ajax-запросов

Одновременное выполнение нескольких ajax-запросов

#javascript #ajax #parallel-processing #blob

#javascript #ajax #параллельная обработка #большой двоичный объект

Вопрос:

У меня есть куча изображений, которые я хочу прочитать с помощью ajax. Если я знаю URL каждого изображения, как я могу одновременно выполнить 3 запроса ajax изображения, а затем получать следующие 3, пока не получу их все?

Это моя ajax-функция для одного изображения

   var image_url = images[i];
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 amp;amp; xhr.status == 200){
      console.log(xhr.response, typeof xhr.response);

    }
  }

  xhr.open('GET', image_url);
  xhr.responseType = 'blob';
  xhr.send();

Комментарии:

1. есть ли причина ограничить 3 одновременными запросами?

2. чтобы не перегружать сервер

3. Вы ищете Promise.all . В приведенных ниже решениях используется jQuery, но это можно сделать с помощью ванильного JS

Ответ №1:

Если вы установите async значение true, вы можете запускать несколько запросов одновременно. Браузер будет ограничивать количество запросов одновременно, в зависимости от того, какой из них используется.

 $.ajax({
    type: "GET",
    async: false,
    url: "foo2.php"
    });

async с ajax работает противоположно тому, что вы могли бы подумать.

Ответ №2:

вы должны поместить URL-адреса для каждого изображения в массив. Если у вас нет проблем с jQuery, вам следует использовать $.get, поскольку это значительно облегчит обработку в этом случае. Затем вызовите его в рекурсивной функции. Это псевдокод, я его не тестировал.

 var imageUrls = [];//populate with your URLs
getImage(0);
getImage(1);
getImage(2);


var getImage = function(iteration){
  $.get(imageUrls[iteration], function(data){
     //handle the image
     //call the function again with the next index
     getImage(iteration 3);
  });

}