¿Cómo puedo usar async GM_xmlhttpRequest para devolver valores en el orden original?

Jan 03 2021

Estoy tratando de hacer un script de Tampermonkey para actualizar las fechas en algún sitio. Obtuve una matriz de identificaciones de un sitio y le solicito datos con la identificación de la matriz. Después de eso, tengo que devolver los datos de cada entrada.

Tal como está la función async, devuelve datos en un orden aleatorio, pero necesito que esas nuevas matrices regresen en el orden original. He intentado sincronizar Promiseys, pero el primero es demasiado lento y no he entendido el segundo.

Puedo ordenar los identificadores, pero también obtuve las fechas que están en el orden de la primera matriz, por lo que no sé cómo lograr el mismo orden que la segunda matriz de identificadores.

Aquí está el código:

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

Respuestas

double-beep Jan 04 2021 at 18:01

Puede utilizar Promesas para ejecutar las GETsolicitudes en un orden específico. He aquí un ejemplo:

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

En este ejemplo, he creado una makeGetRequest()función con devoluciones de una promesa, que se resuelve cuando GET tiene éxito, pero se rechaza si falla.

awaitespera a que la Promesa se resuelva antes de continuar y tryexiste para detectar el rechazo de la Promesa (si el GET falla).

Referencias:

  • Promiseen MDN .
  • awaiten MDN .