Comment recevoir des opérations asynchrones à l'aide de Promise dans Vue.js

Avant-propos

Lors du développement avec Vue.js, nous devons souvent gérer des opérations asynchrones, telles que l'obtention de données du serveur, l'envoi de requêtes, etc. Ces opérations peuvent prendre un certain temps et Vue.js prend en charge l'utilisation de Promise pour gérer les opérations asynchrones. Par conséquent, cet article explorera comment utiliser Promise pour recevoir des opérations asynchrones dans Vue.js.

Qu'est-ce que la promesse ?

Promise est un objet utilisé pour gérer les opérations asynchrones, ce qui vous permet de mieux organiser et gérer le code dans les opérations asynchrones. Lorsque vous devez effectuer une opération asynchrone, Promise renvoie un objet. Cet objet a trois états : en attente, exécuté et rejeté. Un objet Promise ne peut se trouver que dans l’un des états et ne peut pas passer d’un état à un autre.

Promise a deux méthodes principales : then() et catch(). La méthode then() est exécutée lorsque l'objet Promise est dans l'état terminé et la méthode catch() est exécutée lorsque l'objet est dans l'état rejeté.

Comment utiliser Promise dans Vue.js ?

Les composants Vue.js doivent généralement obtenir des données du serveur ou effectuer d'autres opérations asynchrones. Lorsque nous utilisons Promise, nous devons définir une fonction et renvoyer un objet Promise.

Supposons que nous devions faire une requête au serveur, nous pouvons utiliser la bibliothèque axios. Le squelette de la fonction est le suivant :

function getData() {
  return new Promise(function(resolve, reject) {
    // 异步操作
    axios.get('/api/data')
      .then(function(response) {
        resolve(response.data);
      })
      .catch(function(error) {
        reject(error);
      });
  });
}

Dans le code ci-dessus, nous définissons d'abord une fonction appelée getData(). Cette fonction renvoie un objet Promise et reçoit des opérations asynchrones. Les opérations asynchrones utilisent la fonction axios.get() pour effectuer une requête HTTP GET.

Lorsque la fonction axios.get() obtient une réponse, elle appelle la méthode .then() et transmet les données de réponse en tant que paramètre à la fonction solve(). Cela marquera le statut de l’objet Promise comme terminé.

Lorsque la fonction axios.get() rencontre une erreur, elle appelle la méthode .catch() et transmet l'erreur en paramètre à la fonction rejet(). Cela marquera le statut de l’objet Promise comme rejeté.

Il s'agit du framework de base d'un objet Promise. Nous pouvons utiliser ce framework pour implémenter de nombreuses fonctions utiles.

Comment les composants Vue.js utilisent-ils Promise ?

Pour les composants Vue.js, nous pouvons utiliser Promise pour gérer et gérer les opérations asynchrones. Nous pouvons définir une fonction de cycle de vie appelée Mounted() à l'intérieur du composant et y utiliser la fonction Promise. L'exemple de code est le suivant :

export default {
  name: 'MyComponent',
  data () {
    return {
      data: []
    };
  },
  mounted () {
    const self = this;

    getData().then(function(data) {
      self.data = data;
    }).catch(function(error) {
      console.error(error);
    });
  }
};

Dans l'exemple de code ci-dessus, nous définissons d'abord une propriété appelée data dans la définition du composant. Ensuite, dans la fonction de cycle de vie Mounted(), nous appelons la fonction getData() et utilisons les méthodes .then() et .catch() pour gérer les opérations asynchrones.

Nous nous assurons que l'instance du composant est accessible dans les méthodes .then() et .catch() en utilisant const self = this. Dans la méthode .then(), nous attribuons les données à la propriété data du composant.

Il s'agit du cadre de base du code des composants Vue.js utilisant Promise.

Conclusion

Dans cet article, nous avons expliqué comment Promise est utilisé dans Vue.js. Promise est un outil très utile qui nous permet de mieux organiser et gérer le code pour les opérations asynchrones.

Si vous souhaitez en savoir plus sur Promise, vous pouvez consulter la documentation officielle de Promise. J'espère que cet article pourra vous apporter de l'aide.

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!