Como posso usar async GM_xmlhttpRequest para retornar valores na ordem original?

Question

Estou tentando fazer um script Tampermonkey para atualizar as datas em algum site. Peguei uma matriz de id de um site e estou solicitando dados com a id da matriz. Depois disso, tenho que retornar os dados de cada entrada.

Como a função está async, ela retorna dados em uma ordem aleatória, mas eu preciso que essas novas matrizes retornem na ordem original. Tentei sync Promisees, mas o primeiro é muito lento e não entendi o segundo.

Posso classificar ids, mas também tenho as datas que estão na ordem do primeiro Array, então não sei como obter a mesma ordem do segundo array de id.

Aqui está o 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);
}

Answer 1

Você pode usar Promises para executar as GETsolicitações em uma ordem específica. Aqui está um exemplo:

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

Neste exemplo, criei uma makeGetRequest()função com retorna uma promessa, que é resolvida em caso de sucesso de GET, mas rejeitada em caso de falha.

awaitaguarda a promessa ser estabelecida antes de prosseguir e tryexiste para capturar a rejeição da promessa (se o GET falhar).

Referências:

• Promiseno MDN .
• awaitno MDN .