Promise は JavaScript での非同期 XHR リクエストをどのように簡素化できるでしょうか?

Promis によってネイティブ XHR を使用した非同期プログラミングが可能になる方法

フロントエンド アプリで XHR を使用する場合、効率化された非同期のために Promise を利用することが望ましいことがよくあります。プログラミング。ただし、かさばるフレームワークを使用せずに約束された XHR を実装するのは難しい場合があります。

ネイティブ XHR について

約束について詳しく説明する前に、コールバックを使用して基本的な XHR リクエストを実行する方法を確認してみましょう。 :

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

のご紹介XHR による Promise

ネイティブ XHR を約束するために、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();
  });
}

これで、.then() と .then() を使用して非同期 XHR リクエストをシームレスにチェーンして処理できるようになりました。 .catch():

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

機能の強化

カスタマイズ可能なオプション オブジェクトを受け入れることで、makeRequest 関数をさらに強化できます:

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

これにより、POST/PUT データやカスタムなどのパラメータを指定できるようになります。 headers:

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

結論として、有望なネイティブ XHR は、フロントエンド アプリケーションの非同期プログラミングを簡素化し、強化する強力な手段を提供します。 Promise コンストラクターをカスタマイズ可能なオプションとともに使用すると、XHR リクエストを処理するための柔軟かつ効率的なアプローチが提供されます。

以上がPromise は JavaScript での非同期 XHR リクエストをどのように簡素化できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。