JavaScript を使用してネイティブ XHR リクエストを約束するにはどうすればよいですか?

ネイティブ XHR を Promisify する方法

背景

現代のフロントエンド開発では、Promise は非同期操作を管理するための不可欠なツールとなっています。多くのフレームワークは約束のための組み込みメカニズムを提供していますが、ネイティブ コードを使用してこの機能を実現することも可能です。このガイドでは、ネイティブ XHR (XMLHttpRequest) リクエストを Promise に変換する方法を説明します。

ステップ 1: コールバックを使用したリクエスト関数を定義する

まず、コールバックを使用する基本的な XHR リクエスト関数を作成します。

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

ステップ 2: Promise を導入する構築

この関数を約束されたバージョンに変換するには、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();
  });
}

ステップ 3: パラメーターとオプションを使用して強化する

リクエスト関数、メソッド、URL、およびオプションのパラメータを導入します。オブジェクト:

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

使用法

約束された makeRequest 関数を使用すると、XHR を非同期操作としてシームレスに実行できます:

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

代替アプローチ

約束の代わりに、組み込みのサポートを提供するフェッチ API を使用することもできます。約束。ただし、フェッチはすべてのブラウザでサポートされているわけではなく、ポリフィルが必要な場合があることに注意してください。

以上がJavaScript を使用してネイティブ XHR リクエストを約束するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。