Comment puis-je utiliser async GM_xmlhttpRequest pour renvoyer les valeurs dans l'ordre d'origine ?

Jan 03 2021

J'essaie de créer un script Tampermonkey pour mettre à jour les dates sur certains sites. J'ai obtenu un tableau d'identifiants d'un site et j'en demande des données avec l'identifiant du tableau. Après cela, je dois retourner les données de chaque entrée.

Comme la fonction est async, elle renvoie les données dans un ordre aléatoire, mais j'ai besoin que ces nouveaux tableaux reviennent dans l'ordre d'origine. J'ai essayé sync and Promises, mais le premier est trop lent et je n'ai pas compris le second.

Je peux trier les identifiants, mais j'ai également obtenu les dates qui sont dans l'ordre du premier tableau, donc je ne sais pas comment obtenir le même ordre que le deuxième tableau d'identifiants.

Voici le code :

id = GM_getValue('id');

for (let i = 0; i < id.length; i++) {
  setTimeout(() => {
      console.log("Updating " + (i + 1) + " Title");

      GM_xmlhttpRequest({
          method: "GET",
          url: "***" + id[i] + "/***",
          onload: function(response) {
            $(response.responseText).find("#main-form :input").each(function(x) { if (x == 0) ids.push(parseInt($(this).val()));
                if (x == 1) array.push($(this).val()));
            });
        }
      });
  }, i * 333);
}

Réponses

double-beep Jan 04 2021 at 18:01

Vous pouvez utiliser Promises pour exécuter les GETdemandes dans un ordre spécifique. Voici un exemple :

id = GM_getValue('id');

function makeGetRequest(url) {
  return new Promise((resolve, reject) => {
    GM_xmlhttpRequest({
      method: "GET",
      url: url,
      onload: function(response) {
        resolve(response.responseText);
      },
      onerror: function(error) {
        reject(error);
      }
    });
  });
}

for (let i = 0; i < id.length; i++) {
  console.log("Updating " + (i + 1) + " Title");
  try {
    const response = await makeGetRequest("***" + id[i] + "/***");
    $(response).find("#main-form :input").each(function(x) { if (x == 0) ids.push(parseInt($(this).val()));
      if (x == 1) array.push($(this).val());
    });
  } catch (error) { // in case the GET request fails
    console.error("Request failed with error code", error.status, ". Message is ", error.responseText);
  }
}

Dans cet exemple, j'ai créé une makeGetRequest()fonction avec renvoie une promesse, qui est résolue en cas de succès GET, mais rejetée en cas d'échec.

awaitattend que la promesse soit réglée avant de continuer et tryexiste pour attraper le rejet de la promesse (si le GET échoue).

Les références:

  • Promisesur MDN .
  • awaitsur MDN .