javascript - How can I use async GM_xmlhttpRequest to return values in original order?

Question

I'm trying to make a Tampermonkey script to update dates on some site. I got an array of id's from a site, and I'm requesting data from it with the id of the array. After that, I have to return data of each Input.

As the function is async, it returns data in a random order, but I need those new arrays to return in the original order. I have tried sync and Promises, but the first is too slow and I haven't understood the second.

I can sort ids, but I also got the dates which are in the order of the first Array, so I don't know how to achieve the same order as the second id array.

Here's the 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);
}

Answer 1

You can use Promises to execute the GET requests in a specific order. Here's an example:

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

In this example, I've created a makeGetRequest() function with returns a promise, which is resolved on GET success, but rejected on failure.

await waits for the Promise to settle before moving on and the try exists to catch Promise rejection (if the GET fails).

References:

• Promise on MDN.
• await on MDN.