Bagaimana saya bisa menggunakan async GM_xmlhttpRequest untuk mengembalikan nilai dalam urutan asli?

Jan 03 2021

Saya mencoba membuat skrip Tampermonkey untuk memperbarui tanggal di beberapa situs. Saya mendapat array id dari sebuah situs, dan saya meminta data darinya dengan id array. Setelah itu, saya harus mengembalikan data dari setiap Input.

Karena fungsinya adalah async, ia mengembalikan data dalam urutan acak, tetapi saya membutuhkan array baru itu untuk kembali dalam urutan aslinya. Saya sudah mencoba sync dan Promises, tetapi yang pertama terlalu lambat dan saya belum mengerti yang kedua.

Saya dapat mengurutkan id, tetapi saya juga mendapatkan tanggal yang berada di urutan Array pertama, jadi saya tidak tahu bagaimana mencapai urutan yang sama dengan array id kedua.

Berikut kodenya:

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

Jawaban

double-beep Jan 04 2021 at 18:01

Anda dapat menggunakan Promises untuk menjalankan GETpermintaan dalam urutan tertentu. Berikut ini contohnya:

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

Dalam contoh ini, saya telah membuat makeGetRequest()fungsi dengan mengembalikan janji, yang diselesaikan pada GET sukses, tetapi ditolak jika gagal.

awaitmenunggu Promise untuk diselesaikan sebelum melanjutkan dan yang tryada untuk menangkap penolakan Promise (jika GET gagal).

Referensi:

  • Promisepada MDN .
  • awaitpada MDN .