Bagaimana untuk Menjanjikan Permintaan XHR Asli Menggunakan JavaScript?

Cara Menjanjikan Native XHR

Latar Belakang

Dalam pembangunan frontend moden, janji telah menjadi alat penting untuk mengurus operasi tak segerak. Walaupun banyak rangka kerja menyediakan mekanisme terbina dalam untuk janji janji, adalah mungkin untuk mencapai fungsi ini dengan kod asli juga. Panduan ini menunjukkan cara menukar permintaan XHR (XMLHttpRequest) asli kepada janji.

Langkah 1: Tentukan Fungsi Permintaan dengan Panggilan Balik

Mulakan dengan mencipta fungsi permintaan XHR asas yang menggunakan panggilan balik:

function makeRequest(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();
}

Langkah 2: Perkenalkan Janji Pembinaan

Untuk mengubah fungsi ini menjadi versi yang dijanjikan, manfaatkan pembina janji:

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

Langkah 3: Tingkatkan dengan Parameter dan Pilihan

Untuk meningkatkan fleksibiliti fungsi permintaan, memperkenalkan parameter untuk kaedah, url, dan pilihan pilihan objek:

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

Penggunaan

Dengan fungsi makeRequest yang dijanjikan, XHR boleh dilakukan dengan lancar sebagai operasi tak segerak:

makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Pendekatan Alternatif

Alternatif kepada janji janji adalah menggunakan API pengambilan, yang menyediakan sokongan terbina dalam untuk janji. Walau bagaimanapun, perlu diingat bahawa pengambilan mungkin tidak disokong dalam semua penyemak imbas dan mungkin memerlukan poliisi.

Atas ialah kandungan terperinci Bagaimana untuk Menjanjikan Permintaan XHR Asli Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!