비동기 GM_xmlhttpRequest를 사용하여 원래 순서로 값을 반환하려면 어떻게해야합니까?

Question

일부 사이트에서 날짜를 업데이트하기 위해 Tampermonkey 스크립트를 만들려고합니다. 사이트에서 ID 배열을 얻었으며 배열 ID로 데이터를 요청하고 있습니다. 그 후 각 Input의 데이터를 반환해야합니다.

함수가 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);
}

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

이 예제에서는 GET 성공시 해결 되지만 실패시 거부makeGetRequest() 되는 promise를 반환 하는 함수를 만들었습니다 .

await계속 진행하기 전에 Promise가 정착 될 때까지 기다립니다. tryPromise 거부를 잡기 위해 존재합니다 (GET이 실패한 경우).

참조 :

• PromiseMDN에서 .
• awaitMDN에서 .