Bagaimanakah Saya Boleh Memudahkan Permintaan XHR Asli Menggunakan Janji?

Promisifying Native XHR: Pendekatan Ringkas

Dalam aplikasi bahagian hadapan, janji asli menawarkan cara yang mudah untuk mengendalikan operasi tak segerak. Walau bagaimanapun, memasukkannya ke dalam permintaan XHR asli boleh mencabar tanpa bergantung pada rangka kerja yang kompleks. Artikel ini bertujuan untuk merapatkan jurang ini dengan menyediakan panduan ringkas tentang menjanjikan permintaan XHR asli.

Memahami Isu

Sebelum menjanjikan permintaan XHR, adalah penting untuk memahami pendekatan berasaskan panggilan balik biasa. Berikut ialah contoh permintaan XHR asas menggunakan panggilan balik:

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

Pendekatan ini berfungsi dengan baik untuk senario mudah, tetapi ia tidak mempunyai fleksibiliti dan kebolehkomposisian yang ditawarkan oleh janji.

Janji menggunakan the Promise Constructor

Untuk menjanjikan permintaan XHR, kami boleh memanfaatkan pembina Janji. Pembina ini mengambil fungsi dengan dua hujah, selesaikan dan tolak, yang boleh dianggap sebagai panggilan balik untuk kejayaan dan kegagalan, masing-masing.

Mari kemas kini makeXHRRequest untuk menggunakan pembina Promise:

function makeRequest(method, url) {
  return new Promise(function (resolve, reject) {
    var 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();
  });
}

Kod ini memulakan Promise baharu, membuka permintaan XHR dan mengendalikan kedua-dua kejayaan dan ralat senario.

Pengendalian Rantaian dan Ralat

Janji menyediakan cara yang berkesan untuk merantai berbilang permintaan XHR dan mengendalikan ralat dengan berkesan. Berikut ialah contoh permintaan rantaian dan ralat pengendalian:

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

Dalam kod ini, kami mula-mula membuat permintaan GET kepada 'example.com' dan kemudian, berdasarkan respons, membuat permintaan GET yang lain untuk titik akhir yang berbeza (dinyatakan dalam tindak balas). Sebarang ralat yang dihadapi semasa mana-mana permintaan akan dikendalikan oleh klausa tangkapan.

Parameter dan Pengepala Tersuai

Untuk menjadikan janji XHR kami lebih serba boleh, kami boleh menyesuaikan parameter dan tajuk. Kami akan memperkenalkan objek opts dengan tandatangan berikut:

{
  method: String,
  url: String,
  params: String | Object,
  headers: Object,
}

Berikut ialah versi makeRequest yang diubah suai yang membenarkan parameter dan pengepala tersuai:

function makeRequest(opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.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,
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

Versi ini menawarkan lebih fleksibiliti dalam membuat permintaan XHR, membolehkan anda menentukan parameter dan pengepala tersuai.

Kesimpulannya, menjanjikan permintaan XHR menggunakan janji asli ialah pendekatan mudah yang meningkatkan fleksibiliti dan kebolehkomposisian kod bahagian hadapan anda. Ia memberi kuasa kepada anda untuk membuat permintaan XHR tak segerak dengan mudah, merantainya dan mengendalikan ralat dengan berkesan. Dengan memanfaatkan konsep yang dibincangkan dalam artikel ini, anda boleh membuka kunci potensi janji asli untuk pembangunan aplikasi bahagian hadapan anda.

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