javascript - 如何使用 async GM_xmlhttpRequest 以原始顺序返回值？

Question

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

由于函数是async，它以随机顺序返回数据，但我需要这些新数组以原始顺序返回。我试过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);
}

标签： javascriptjquerytampermonkeyuserscripts

Answer 1

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

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

在这个例子中，我创建了一个makeGetRequest()返回 promise 的函数，它在 GET 成功时被解析，但在失败时被拒绝。

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

参考：

• Promise在 MDN 上。
• await在 MDN 上。