Comment utiliser l'écriture manuscrite Promise pour implémenter des opérations asynchrones dans Vue

Vue est un framework frontal très populaire dont l'idée principale est la vue basée sur les données. Vue simplifie considérablement le flux de travail de développement front-end grâce à un mécanisme sensible aux données et à des idées de composants, offrant aux développeurs une expérience de développement plus efficace et plus pratique. Dans Vue, nous devons souvent effectuer des opérations asynchrones, telles que demander des données au serveur, des minuteries, etc. La promesse, en tant que méthode d'opération asynchrone couramment utilisée en JavaScript, est également largement utilisée dans les projets Vue. Cet article présentera en détail comment implémenter des opérations asynchrones en écrivant manuellement Promise dans Vue.

Utilisation de base de Promise

Dans Vue, nous obtenons généralement les données du serveur via des requêtes AJAX, et AJAX est une opération asynchrone, elle doit donc être encapsulée avec Promise. L'utilisation courante de Promise est la suivante :

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

Dans le code ci-dessus, nous créons d'abord un objet Promise. Le constructeur Promise reçoit une fonction en tant que paramètre. La fonction contient deux paramètres, résoudre et rejeter, qui représentent les fonctions de rappel en cas de succès. et les opérations asynchrones ont échoué respectivement. Une fois l'opération asynchrone terminée, nous transmettons les données à la fonction de rappel dans la méthode then en appelant la fonction de résolution. Si une erreur se produit lors d'une opération asynchrone, nous pouvons transmettre les informations d'erreur à la fonction de rappel dans la méthode catch via la fonction de rejet.

Promesse manuscrite d'implémenter des opérations asynchrones

Dans Vue, nous devons souvent encapsuler certaines méthodes d'outils ou méthodes d'instance de Vue et les exposer pour une utilisation globale. Par conséquent, l’écriture manuscrite de Promesse est devenue une compétence essentielle. Ci-dessous, nous montrerons comment utiliser la promesse manuscrite JavaScript pour implémenter des opérations asynchrones.

Tout d'abord, nous devons définir une fonction qui encapsule les opérations asynchrones et transmettre deux paramètres, résoudre et rejeter, pour contrôler la fonction de rappel de réussite ou d'échec de l'opération asynchrone. Le code est le suivant :

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

Dans le code ci-dessus, nous définissons la fonction myPromise et initialisons certaines variables telles que la valeur et l'erreur. Dans la fonction, nous définissons deux fonctions de rappel, résoudre et rejeter, et les appeler avec le paramètre passé fn. La fonction de rappel de résolution reçoit une valeur value, qui est utilisée pour transmettre des données à la méthode then une fois l'opération asynchrone réussie. La fonction de rappel de rejet reçoit un message d'erreur, qui est utilisé pour transmettre le message d'erreur à la méthode catch après l'échec de l'opération asynchrone.

Ensuite, nous devons implémenter la méthode then pour gérer la fonction de rappel une fois l'opération asynchrone réussie. Le code est le suivant :

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

Dans le code ci-dessus, nous avons implémenté la méthode then sur le prototype myPromise et passé les deux fonctions de rappel onFulfilled et onRejected en tant que paramètres. Dans la méthode, nous stockons ces deux fonctions de rappel dans l'objet Self, appelons la fonction onFulfilled une fois l'opération asynchrone réussie et transmettons les données à la fonction de rappel dans la méthode then. Après l'échec de l'opération asynchrone, appelez la fonction onRejected et transmettez les informations d'erreur à la méthode catch.

Enfin, nous devons implémenter la méthode catch pour gérer la fonction de rappel après l'échec de l'opération asynchrone. Le code est le suivant :

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

Dans le code ci-dessus, nous avons implémenté la méthode catch sur le prototype myPromise et passé la fonction de rappel onRejected en tant que paramètre. Dans la méthode, nous stockons la fonction onRejected dans l'objet Self et transmettons le message d'erreur à la fonction de rappel onRejected après l'échec de l'opération asynchrone.

Application complète

Ensuite, nous implémenterons des opérations asynchrones basées sur Vue et combinées avec myPromise. Dans une instance Vue, nous définissons une méthode asynchrone fetchData pour demander des données au serveur. Dans la méthode fetchData, nous écrivons manuellement un objet Promise pour demander des données, puis stockons les données dans l'attribut 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;
    });
  }
});

Dans le code ci-dessus, nous définissons d'abord une instance Vue, puis initialisons les variables utilisées pour stocker les données et les informations d'erreur dans l'attribut data. Dans la méthode fetchData, nous écrivons manuellement un objet Promise, créons un objet de requête AJAX et transmettons les fonctions de rappel pour le succès et l'échec de la demande de données aux fonctions de résolution et de rejet respectivement. Après avoir exécuté avec succès l'opération asynchrone, nous obtenons les données renvoyées par le serveur et les stockons dans l'attribut data. Après l'échec de l'opération asynchrone, nous obtenons les informations d'erreur et les stockons dans l'attribut d'erreur. Dans la fonction hook montée, nous obtenons les données du serveur en appelant la méthode fetchData et gérons le succès et l'échec de l'opération asynchrone via les méthodes then et catch respectivement. Une fois l'opération asynchrone réussie, nous obtenons les données renvoyées par le serveur et les attribuons à la variable globale self.data. Après l'échec de l'opération asynchrone, nous obtenons le message d'erreur et le stockons dans la variable globale self.error.

En écrivant Promise à la main, nous pouvons mieux comprendre le principe et l'utilisation de Promise, et pouvons encapsuler nos propres méthodes d'outils ou méthodes d'instance Vue. Dans le développement réel, nous devons choisir des méthodes de traitement asynchrone appropriées en fonction de besoins spécifiques et de scénarios commerciaux pour améliorer l'efficacité du développement et l'expérience utilisateur du projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!