Compréhension approfondie de la méthode de requête Vue et de son application

Vue est un framework frontal populaire qui fournit de nombreuses fonctionnalités puissantes, dont l'une consiste à effectuer des requêtes HTTP. La méthode de requête de Vue est une API basée sur Promise qui peut facilement utiliser AJAX pour appeler des services back-end. Dans cet article, nous examinerons en profondeur la méthode de requête Vue et ses applications.

1. Principes de base de la méthode de requête Vue

La méthode de requête Vue est une API dans Vue qui permet aux applications Vue des développeurs de lancer des requêtes HTTP. Il est packagé sur la base de la bibliothèque Axios, qui est un client HTTP basé sur Promise pour les navigateurs et Node.js.

Dans Vue, nous pouvons utiliser Vue.prototype.$http pour appeler la méthode de requête :

this.$http.get('/api/users').then(response => {
  console.log(response)
})

Dans l'exemple ci-dessus, nous envoyons une requête GET à /api/users et utilisons la méthode then pour gérer la réponse. Lorsque la réponse est obtenue avec succès, la méthode then est exécutée et la réponse est passée en paramètre.

Différent des requêtes GET, vous pouvez également utiliser des méthodes HTTP telles que POST, PUT, PATCH et DELETE :

this.$http.post('/api/users', { username: 'John', password: '123' }).then(response => {
  console.log(response)
})

this.$http.put('/api/users/1', { username: 'John', password: '123' }).then(response => {
  console.log(response)
})

this.$http.patch('/api/users/1', { password: '456' }).then(response => {
  console.log(response)
})

this.$http.delete('/api/users/1').then(response => {
  console.log(response)
})

Dans ces exemples, nous utilisons les méthodes POST, PUT, PATCH et DELETE pour envoyer des requêtes au serveur et transmettre le corps de la requête en même temps. De même, lorsque la réponse est obtenue avec succès, la méthode then sera exécutée et la réponse sera passée en paramètre.

2. La méthode de requête Vue définit les en-têtes de requête et les intercepteurs

En plus de la méthode de requête HTTP de base, la requête Vue permet également aux développeurs de définir des en-têtes de requête et des intercepteurs. Les en-têtes de requête peuvent contenir des informations utiles telles que des en-têtes d'autorisation, d'autres en-têtes spécifiques à l'application, etc. Utilisez des intercepteurs pour modifier ou intercepter les demandes avant que la demande ne soit envoyée ou après le retour de la réponse.

La définition des en-têtes de requête est très simple. Nous pouvons définir les en-têtes de requête en passant un objet d'options :

this.$http.get('/api/users', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
}).then(response => {
  console.log(response)
})

Dans cet exemple, nous ajoutons un en-tête d'autorisation et y ajoutons un jeton basé sur Bearer.

De même, nous pouvons également ajouter des intercepteurs pour modifier les demandes et les réponses. Ces intercepteurs peuvent être appelés avant l'envoi de la requête et après le retour de la réponse :

// 添加请求拦截器
this.$http.interceptors.request.use(config => {
  // 在请求发送之前执行
  config.headers.Authorization = 'Bearer ' + token
  // 如果需要修改请求的数据，可以在此处修改并返回config
  return config
}, error => {
  // 对请求错误做些什么
  console.log(error)
})

// 添加响应拦截器
this.$http.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response
}, error => {
  // 对响应错误做些什么
  console.log(error)
})

Dans cet exemple, nous ajoutons un intercepteur de requête qui modifie les informations d'en-tête de la requête avant d'envoyer la requête. Nous avons également ajouté un intercepteur de réponse pour modifier la réponse après son retour. La valeur de retour de l'intercepteur écrasera la demande et la réponse d'origine.

3. Encapsulation et utilisation de la méthode de requête Vue

Pour les grands projets, nous encapsulons généralement la méthode de requête Vue. La méthode de requête encapsulée simplifiera le code et facilitera sa maintenance et sa mise à niveau. Voici un exemple d'encapsulation simple :

import axios from 'axios'

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

Dans cet exemple, nous utilisons la bibliothèque axios pour lancer une requête HTTP et renvoyer une promesse. Nous encapsulons les requêtes GET et POST dans deux fonctions indépendantes. Lorsque la requête réussit, la méthode de résolution renverra les données traitées ; lorsque la requête échoue, la méthode de rejet renverra les informations d'erreur. Des en-têtes de requête et des intercepteurs peuvent être ajoutés selon les besoins.

Lorsque vous utilisez des méthodes de requête encapsulées, vous pouvez utiliser les méthodes get et post en important des fichiers :

import { get, post } from '@/api/http'

get('/api/users').then(data => {
  console.log(data)
})

post('/api/login', { username: 'john', password: '123' }).then(data => {
  console.log(data)
})

Dans cet exemple, nous importons les fonctions get et post et les utilisons pour lancer des requêtes GET et POST. Les paramètres de requête et les données du corps de la requête peuvent être transmis si nécessaire.

4. Conclusion

La méthode de requête Vue est l'une des fonctions nécessaires lors de l'utilisation du framework Vue. Il utilise l'API Promise pour simplifier le traitement des requêtes pour l'interface API du serveur et fournit également la fonction d'en-têtes de requêtes personnalisés et d'intercepteurs. Les développeurs peuvent encapsuler la méthode de requête en fonction de leurs besoins pour simplifier le code et améliorer la maintenabilité. Par exemple, nous pourrions choisir d'encapsuler les requêtes courantes dans un plugin global à utiliser dans toute l'application Vue.

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!