如何按原始顺序使用异步 GM_xmlhttpRequest 到 return 值？

Question

我正在尝试制作 Tampermonkey 脚本来更新某些网站上的日期。我从一个站点获得了一个 id 数组，我正在使用该数组的 id 从它请求数据。之后，我必须 return 每个输入的数据。

由于函数是 async，它 return 的数据是随机排列的，但我需要这些新数组以 return 的原始顺序排列。我试过sync和Promises，但是第一个太慢了，我没看懂第二个。

我可以对 id 进行排序，但我也得到了按第一个数组顺序排列的日期，所以我不知道如何实现与第二个 id 数组相同的顺序。

代码如下：

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

您可以使用 Promise 按特定顺序执行 GET 请求。这是一个例子：

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

在这个例子中，我创建了一个带有 returns 承诺的 makeGetRequest() 函数，失败时 resolved on GET success, but rejected。

await 在继续之前等待 Promise 解决并且 try 存在以捕获 Promise 拒绝（如果 GET 失败）。

参考文献：

如何按原始顺序使用异步 GM_xmlhttpRequest 到 return 值？

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

javascript

jquery

tampermonkey

userscripts