Обновите DOM с ответами от нескольких XMLHttpRequest

Question

Я создаю простое расширение Chromium с открытым исходным кодом, которое извлекает некоторые данные из нескольких URL-адресов, а затем обновляет DOM.Я мог бы найти другой способ сделать это, кроме добавления строки для обновления DOM внутри обратного вызова http1.onreadystatechange

Мои XMLHttpRequest запросы часто зависали на http1.readyState = 3, поэтому я добавил третий параметр в http1.open("GET"); чтобы сделать запрос синхронным, как это:

http1.open("GET", url, false);

Но я все еще получаю эти ошибки:

results[1].join is not a function at XMLHttpRequest.http.onreadystatechange
annot read property 'join' of undefined at XMLHttpRequest.http.onreadystatechange

Я даже думаю, что они не мешают запуску сценария, я думаюэто не правильный способ делать то, что я хочу.Итак, вот мой вопрос: как обновить DOM с ответами на несколько запросов XMLHttpRequest?Допустим, мне нужно получить и сравнить все данные перед обновлением DOM.Тогда есть ли способ обработать все данные сразу после того, как мы получим их все (см. Мой комментарий к последней строке)?

Вот соответствующая часть моего скрипта, полный скрипт доступен здесь :

  var urls = [
      ["https://www.cnrtl.fr/morphologie/" + keyword, "vtoolbar", "morf_sound"], //best for plural
      ["https://www.cnrtl.fr/synonymie/" + keyword, "syno_format"],
  ]
  // for test set keyword to any of this word :  hibou,  tribal, aller, lancer

  var resultdiv = document.getElementById("result")
  resultdiv.innerText = "requete en cours";
  var results = [];
  var errors = [];

  urls.forEach((item, index) => {
      var http = new XMLHttpRequest();
      http.onreadystatechange = function () {
          if (http.readyState == 4 && http.status == 200) {
              parser = new DOMParser();
              var ulr1response = parser.parseFromString(http.responseText, "text/html");
              if (index == 0) {
                   //retrieve the data needed, save then in a list and push this list to the main list result

              } else if (index == 1) {
                  //retrieve the data needed, save then in a list and push this list to the main list result
              }

              // update the DOM 
              if (results[1] == "") {
                  resultdiv.innerHTML = results[0].join(", ") + "</br></br>Pas de synonymes trouvés"
              } else {
                  resultdiv.innerHTML = "<b>" + results[0].join(", ") + "</br></br>Synonymes:</b></br>● " + results[1].join('</br>● ')
              }

          } else {
              errors.push(index);
              resultdiv.innerText = "Erreur: " + index + " " + http.readyState + "  " + http.status;
          }
      }
      http.open("GET", item[0], false);
      http.send(null); // null = no parameters
  });

// it would be simplier if I could update the DOM here and not in  http.onreadystatechange

Answer 1

Если вы хотите выполнить какой-то код после того, как все запросы будут выполнены успешно, вы можете попробовать использовать Promise.all вместе с Fetch .

let keyword = "beaucoup";
let parser = new DOMParser();

let urls = [
  ["https://www.cnrtl.fr/morphologie/" + keyword, "vtoolbar", "morf_sound"], //best for plural
  ["https://www.cnrtl.fr/synonymie/" + keyword, "syno_format"]
];

let fetchPromises = urls.map(
  item => fetch(item[0]).then(
    response => parser.parseFromString(response.text(), "text/html")
  )
);

Promise.all(fetchPromises).then(
  results => {
    // code in here executes once all fetchPromises have succeeded
    // "results" will be an array of parsed response data
    console.log(results);
  }
).catch(console.error);