Implémentation et encapsulation de requêtes asynchrones dans Vue

Implémentation et encapsulation de requêtes asynchrones dans Vue

En développement, il est souvent nécessaire de faire des requêtes asynchrones avec le serveur back-end pour obtenir des données ou soumettre des données. Vue fournit un moyen simple et puissant de gérer les requêtes asynchrones, c'est-à-dire en utilisant la bibliothèque axios pour l'encapsulation.

1. Implémentation de requêtes asynchrones
Dans le projet Vue, les requêtes asynchrones peuvent être implémentées en utilisant axios dans les méthodes du composant. Voici un exemple d'obtention d'informations utilisateur :

1. Tout d'abord, vous devez introduire la bibliothèque axios dans le projet. Vous pouvez l'installer via npm, ou l'introduire directement dans la page :

   import axios from 'axios'

2. Dans les méthodes. du composant, écrivez le code demandé asynchrone :

   methods: {
     getUserInfo() {
    axios.get('/api/user').then(response => {
      // 请求成功后的处理逻辑
      console.log(response.data)
    }).catch(error => {
      // 请求失败后的处理逻辑
      console.error(error)
    })
     }
   }

3. Appelez la méthode getUserInfo lorsque le cycle de vie ou l'événement du composant est déclenché :

   created() {
     this.getUserInfo()
   }

Dans le code ci-dessus, utilisez la méthode get d'axios pour envoyer une requête GET. L'adresse de la demande est /api/user. Une fois la demande réussie, transmettez la méthode pour obtenir les données renvoyées, et après l'échec de la demande, les informations d'erreur sont capturées via la méthode catch.

2. Encapsulation des requêtes asynchrones
Afin d'améliorer la réutilisabilité et la maintenabilité du code, les requêtes asynchrones peuvent être encapsulées dans un module indépendant pour être utilisées par plusieurs composants.

1. Tout d'abord, créez un fichier api.js pour encapsuler toutes les méthodes de requête asynchrone :

   import axios from 'axios'
   
   export function getUserInfo() {
     return axios.get('/api/user')
   }

2. Introduisez api.js dans le composant et appelez la méthode correspondante :

   import { getUserInfo } from './api.js'
   
   methods: {
     getUser() {
    getUserInfo().then(response => {
      console.log(response.data)
    }).catch(error => {
      console.error(error)
    })
     }
   }

En ajoutant toutes les méthodes de requête asynchrone sont encapsulées dans api.js, et ces méthodes peuvent être directement appelées pour obtenir des données, évitant ainsi d'avoir à écrire à plusieurs reprises le même code dans chaque composant.

3. Utilisez l'intercepteur axios
Dans les requêtes asynchrones, il est souvent nécessaire d'effectuer un traitement général avant l'envoi de la requête ou après le retour de la réponse, comme l'ajout d'en-têtes de requête, la modification des paramètres de requête et la gestion uniforme des erreurs. À ce stade, vous pouvez utiliser l'intercepteur axios pour y parvenir.

1. Dans api.js, ajoutez le code suivant :

   // 添加请求拦截器，设置请求头
   axios.interceptors.request.use(
     config => {
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
    return config
     },
     error => {
    return Promise.reject(error)
     }
   )
   
   // 添加响应拦截器，统一处理错误
   axios.interceptors.response.use(
     response => {
    return response
     },
     error => {
    console.error(error)
    return Promise.reject(error)
     }
   )

En ajoutant un intercepteur, vous pouvez définir l'en-tête de la requête avant l'envoi de la requête et gérer les erreurs de manière uniforme après le retour de la réponse.

2. Modifiez la méthode getUserInfo afin qu'elle réponde aux exigences de l'intercepteur :

   export function getUserInfo() {
     return axios.get('/api/user').then(response => {
    return response.data
     }).catch(error => {
    console.error(error)
    return Promise.reject(error)
     })
   }

Transmettez l'objet Promise renvoyé à l'intercepteur en utilisant .then et .catch dans la méthode getUserInfo.

Grâce aux étapes ci-dessus, l'encapsulation et la mise en œuvre des requêtes asynchrones dans Vue sont réalisées. Grâce à l'encapsulation, le code de requête asynchrone est rendu plus concis, unifié et maintenable, et améliore également la réutilisation du code. Dans le même temps, grâce à l'utilisation d'intercepteurs, les modifications de requête et la gestion des erreurs peuvent être facilement effectuées avant l'envoi de la requête et après le retour de la réponse.

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!