手書きの Promise 手書きを使用して Vue で非同期操作を実装する方法

Vue は非常に人気のあるフロントエンド フレームワークであり、その中心的な考え方はデータ駆動型のビューです。 Vue は、データ応答メカニズムとコンポーネント化のアイデアによってフロントエンド開発ワークフローを大幅に簡素化し、開発者により効率的で便利な開発エクスペリエンスを提供します。 Vue では、サーバー データやタイマーなどのリクエストなどの非同期操作を実行する必要があることがよくあります。Promise は、JavaScript で一般的に使用される非同期操作メソッドとして、Vue プロジェクトでも広く使用されています。この記事では、VueでPromiseを手書きして非同期操作を実装する方法を詳しく紹介します。

Promise の基本的な使い方

Vue では通常、AJAX リクエストを通じてサーバー データを取得します。AJAX は非同期操作であるため、Promise でカプセル化する必要があります。 Promise の一般的な使用法は次のとおりです:

let promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    // 模拟异步操作结束
    let result = 'This is data requested from server.';
    // 将数据传递给 then 方法
    resolve(result);
  }, 1000);
});

promise.then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

上記のコードでは、最初に Promise オブジェクトを作成します。Promise コンストラクターはパラメーターとして関数を受け取ります。関数には、resolve と拒否の 2 つのパラメーターが含まれています。それぞれ非同期操作の成功と拒否、失敗のコールバック関数。非同期操作が終了したら、resolve 関数を呼び出して、then メソッドのコールバック関数にデータを渡します。非同期操作中にエラーが発生した場合は、reject 関数を介して catch メソッドのコールバック関数にエラー情報を渡すことができます。

非同期操作を実装するための手書きの約束

Vue では、多くの場合、特定のツール メソッドまたは Vue インスタンス メソッドをカプセル化し、グローバルに使用できるように公開する必要があります。したがって、手書きの約束は必須のスキルとなっています。以下では、JavaScript 手書き Promise を使用して非同期操作を実装する方法を示します。

最初に、非同期操作をカプセル化する関数を定義し、2 つのパラメーター (resolve と拒否) を渡して、非同期操作の成功または失敗のコールバック関数を制御する必要があります。コードは次のとおりです。

function myPromise(fn) {
  let self = this;
  self.value = null;
  self.error = null;
  self.onFulfilled = null;
  self.onRejected = null;
  
  function resolve(value) {
    self.value = value;
    self.onFulfilled(self.value);
  }
  
  function reject(error) {
    self.error = error;
    self.onRejected(self.error);
  }

  fn(resolve, reject);
}

上記のコードでは、myPromise 関数を定義し、値やエラーなどのいくつかの変数を初期化します。この関数では、2 つのコールバック関数solve とrejectを定義し、渡されたパラメーター fn を使用してそれらを呼び出します。解決コールバック関数は値 value を受け取ります。この値は、非同期操作が成功した後にデータを then メソッドに渡すために使用されます。拒否コールバック関数はエラー メッセージを受け取ります。このメッセージは、非同期操作が失敗した後にエラー メッセージを catch メソッドに渡すために使用されます。

次に、非同期操作が成功した後にコールバック関数を処理するための then メソッドを実装する必要があります。コードは次のとおりです。

myPromise.prototype.then = function(onFulfilled, onRejected) {
  let self = this;
  self.onFulfilled = onFulfilled;
  self.onRejected = onRejected;
};

上記のコードでは、myPromise プロトタイプに then メソッドを実装し、2 つのコールバック関数 onFulfilled と onRejected をパラメータとして渡します。このメソッドでは、これら 2 つのコールバック関数を Self オブジェクトに格納し、非同期操作が成功した後に onFulfilled 関数を呼び出し、then メソッドのコールバック関数にデータを渡します。非同期操作が失敗した後、onRejected 関数を呼び出し、エラー情報を catch メソッドに渡します。

最後に、非同期操作が失敗した後にコールバック関数を処理するために catch メソッドを実装する必要があります。コードは次のとおりです。

myPromise.prototype.catch = function(onRejected) {
  let self = this;
  self.onRejected = onRejected;
};

上記のコードでは、myPromise プロトタイプに catch メソッドを実装し、onRejected コールバック関数をパラメータとして渡します。このメソッドでは、onRejected 関数を Self オブジェクトに保存し、非同期操作が失敗した後にエラー メッセージを onRejected コールバック関数に渡します。

包括的なアプリケーション

次に、Vue に基づいて myPromise と組み合わせた非同期操作を実装します。 Vue インスタンスでは、サーバー データをリクエストするための非同期メソッド fetchData を定義します。 fetchData メソッドでは、データを要求する Promise オブジェクトを手動で作成し、そのデータを data 属性に格納します。

new Vue({
  el: '#app',
  data: {
    data: null,
    error: null
  },
  methods: {
    fetchData: function() {
      let self = this;
      return new myPromise(function(resolve, reject) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/api/data', true);
        xhr.onreadystatechange = function() {
          if(xhr.readyState === 4) {
            if(xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              reject(xhr.statusText);
            }
          }
        };
        xhr.onerror = function() {
          reject(xhr.statusText);
        };
        xhr.send();
      });
    }
  },
  mounted: function() {
    let self = this;
    self.fetchData().then(function(data) {
      self.data = data;
    }).catch(function(error) {
      self.error = error;
    });
  }
});

上記のコードでは、まず Vue インスタンスを定義し、次にデータとエラー情報を data 属性に格納するために使用される変数を初期化します。 fetchData メソッドでは、Promise オブジェクトを手動で作成し、AJAX リクエスト オブジェクトを作成し、データ リクエストの成功と失敗のコールバック関数をそれぞれ解決関数と拒否関数に渡します。非同期操作が正常に実行された後、サーバーから返されたデータを取得し、データ属性に格納します。非同期操作が失敗した後、エラー情報を取得し、それを error 属性に保存します。実装されたフック関数では、 fetchData メソッドを呼び出してサーバー データを取得し、非同期操作の成功と失敗をそれぞれ then メソッドと catch メソッドで処理します。非同期操作が成功した後、サーバーから返されたデータを取得し、それをグローバル変数 self.data に割り当てます。非同期操作が失敗すると、エラー メッセージを取得し、それをグローバル変数 self.error に保存します。

Promise を手書きすることで、Promise の原理と使用法をよりよく理解でき、独自のツール メソッドや Vue インスタンス メソッドをカプセル化できます。実際の開発では、プロジェクトの開発効率とユーザーエクスペリエンスを向上させるために、特定のニーズとビジネスシナリオに基づいて適切な非同期処理方法を選択する必要があります。

以上が手書きの Promise 手書きを使用して Vue で非同期操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。