Promise を使用してネイティブ XHR リクエストを簡素化するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-07 07:50:13

オリジナル

306 人が閲覧しました

How Can I Simplify Native XHR Requests Using Promises?

ネイティブ XHR の約束: 簡素化されたアプローチ

フロントエンドアプリケーションでは、ネイティブ Promise は非同期操作を処理する便利な方法を提供します。ただし、複雑なフレームワークに依存しない限り、これらをネイティブ XHR リクエストに組み込むのは困難な場合があります。この記事は、ネイティブ XHR リクエストの約束に関する簡単なガイドを提供することで、このギャップを埋めることを目的としています。

問題を理解する

XHR リクエストを約束する前に、典型的なコールバックベースのアプローチ。コールバックを使用した基本的な XHR リクエストの例を次に示します。

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

ログイン後にコピー

このアプローチは単純なシナリオではうまく機能しますが、Promise によって提供される柔軟性と構成可能性に欠けています。

Promisification using Promise コンストラクター

XHR リクエストを約束するには、 Promise コンストラクターを活用できます。このコンストラクターは、2 つの引数、resolve と request を持つ関数を受け取ります。これらは、それぞれ成功と失敗のコールバックと考えることができます。

Promise コンストラクターを使用するように makeXHRRequest を更新しましょう。

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

ログイン後にコピー

このコードは新しい Promise を初期化し、XHR リクエストを開き、成功とエラーの両方を処理します。

チェーンとエラー処理

Promise は、複数の XHR リクエストをチェーンし、エラーを効果的に処理する強力な方法を提供します。リクエストの連鎖とエラー処理の例を次に示します。

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

ログイン後にコピー

このコードでは、まず 'example.com' への GET リクエストを作成し、次にその応答に基づいて別の GET リクエストを 'example.com' に作成します。別のエンドポイント (応答で指定)。いずれかのリクエスト中に発生したエラーは、catch 句によって処理されます。

カスタムパラメータとヘッダー

XHR 約束をより多用途にするために、パラメータとヘッダーをカスタマイズできます。ヘッダー。次のシグネチャを持つ opts オブジェクトを導入します:

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

ログイン後にコピー

カスタムパラメーターとヘッダーを可能にする makeRequest の修正バージョンを次に示します:

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

ログイン後にコピー

このバージョンでは、より柔軟な機能が提供されます。 XHR リクエストを作成し、カスタムパラメータとヘッダーを指定できるようにします。

結論として、ネイティブ Promise を使用して XHR リクエストを約束することは、フロントエンドコードの柔軟性と構成可能性を強化する単純なアプローチです。これにより、非同期 XHR リクエストを簡単に作成し、それらをチェーンし、エラーを効果的に処理できるようになります。この記事で説明した概念を活用することで、フロントエンドアプリケーション開発のネイティブ Promise の可能性を引き出すことができます。

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