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

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

王林

リリース： 2023-06-11 09:53:00

オリジナル

1096 人が閲覧しました

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 サイトの他の関連記事を参照してください。