Bagaimanakah Janji Boleh Memudahkan Permintaan XHR Asynchronous dalam JavaScript?

Cara Janji Mendayakan Pengaturcaraan Asynchronous dengan Native XHR

Apabila bekerja dengan XHR dalam apl frontend, selalunya diingini untuk menggunakan janji untuk tak segerak diperkemas pengaturcaraan. Walau bagaimanapun, melaksanakan XHR yang dijanjikan tanpa rangka kerja yang besar boleh terbukti mencabar.

Memahami Native XHR

Sebelum mendalami janji, mari semak cara melaksanakan permintaan XHR asas menggunakan panggilan balik :

function makeRequest(method, url, done) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function() {
    done(null, xhr.response);
  };
  xhr.onerror = function() {
    done(xhr.response);
  };
  xhr.send();
}

Memperkenalkan Janji dengan XHR

Untuk menjanjikan XHR asli, kami memanfaatkan pembina Promise:

function makeRequest(method, url) {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function() {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

Kini, kami boleh merantai dan mengendalikan permintaan XHR tak segerak menggunakan .then() dan .catch():

makeRequest('GET', 'http://example.com')
  .then(function(datums) {
    console.log(datums);
  })
  .catch(function(err) {
    console.error('Augh, there was an error!', err.statusText);
  });

Dipertingkat Kefungsian

Kami boleh meningkatkan lagi fungsi makeRequest dengan menerima objek pilihan yang boleh disesuaikan:

function makeRequest(opts) {
  return new Promise(function(resolve, reject) {
    // ... (code remains similar to previous example) ...
  });
}

Ini membolehkan kami menentukan parameter seperti data POST/PUT dan pengepala tersuai:

makeRequest({
  method: 'GET',
  url: 'http://example.com',
  params: {
    score: 9001
  },
  headers: {
    'X-Subliminal-Message': 'Upvote-this-answer'
  }
});

Kesimpulannya, menjanjikan XHR asli menawarkan cara yang ampuh untuk memudahkan dan meningkatkan pengaturcaraan tak segerak dalam aplikasi bahagian hadapan anda. Menggunakan pembina Promise bersama-sama dengan pilihan yang boleh disesuaikan menyediakan pendekatan yang fleksibel dan cekap untuk mengendalikan permintaan XHR.

Atas ialah kandungan terperinci Bagaimanakah Janji Boleh Memudahkan Permintaan XHR Asynchronous dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!