Qu'est-ce que l'interception des requêtes de vue ?

Avant-propos

Avec le développement rapide de la technologie front-end, les frameworks front-end deviennent de plus en plus diversifiés. En tant que framework MVVM front-end populaire, Vue.js continue d'attirer de nouveaux développeurs pour rejoindre le camp Vue.js. Dans Vue.js, nous utilisons souvent des requêtes AJAX pour obtenir des données du serveur, mais avant d'envoyer la requête, nous devons nous assurer de la légalité et de la sécurité de la requête. Cela nécessite l'utilisation du mécanisme d'interception des requêtes de Vue.js. Cet article vous donnera une introduction approfondie au mécanisme d'interception de requêtes de Vue.js.

Qu'est-ce que l'interception de requêtes ?

Dans Vue.js, nous utilisons généralement axios comme bibliothèque pour les requêtes AJAX. Axios fournit un mécanisme d'interception de requêtes qui peut intercepter et modifier les requêtes avant qu'elles ne soient envoyées. L'intercepteur de requête nous permet d'effectuer certains traitements avant d'envoyer la requête, comme ajouter un jeton à l'en-tête de la requête ou effectuer une vérification d'autorisation avant la requête.

Mise en œuvre de l'interception des requêtes

Tout d'abord, nous devons introduire axios et Vue :

import axios from 'axios'
import Vue from 'vue'

Ensuite, nous pouvons définir une instance axios :

const Axios = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
})

Ensuite, nous devons laisser Vue intercepter toutes les requêtes, nous devons donc dans le fichier de configuration Définir l'intercepteur global. Sous le dossier src, créez un nouveau dossier appelé interceptors, puis créez un nouveau fichier appelé index.js sous le dossier interceptors :

import Axios from '@/utils/axios'

// 请求拦截器
Axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = token
  }
  return config
})

// 响应拦截器
Axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error)
})

Vue.prototype.$http = Axios

export default Axios

Dans ce code, nous définissons un intercepteur de requête et un intercepteur de réponse. Dans l'intercepteur de requête, nous obtenons le jeton stocké localement et l'ajoutons à l'en-tête de la requête.

Pour les intercepteurs de réponse, si la requête réussit, les données de réponse seront renvoyées directement. Si la requête échoue, Promise.reject sera renvoyé et un message d'erreur sera renvoyé.

Enfin, nous devons référencer le fichier interceptors/index.js dans le fichier main.js :

import Axios from '@/interceptors'

// 将 Axios 挂载到 Vue 实例上
Vue.prototype.$http = Axios

À ce stade, nous avons terminé avec succès la mise en œuvre de l'interception des requêtes Vue.js. Il ressort du code que le mécanisme d'interception des requêtes est d'une grande aide pour les applications Vue.js et peut considérablement améliorer notre efficacité de développement.

Résumé

Cet article présente le mécanisme d'interception de requêtes de Vue.js. Les intercepteurs nous permettent d'intercepter et de modifier les demandes avant leur envoi. De cette façon, nous pouvons effectuer certains traitements avant d'envoyer la demande, comme ajouter un jeton à l'en-tête de la demande, ou effectuer une vérification des autorisations avant la demande, etc. Dans les applications Vue.js, les requêtes avec interception sont inévitables, il est donc très important de maîtriser la méthode d'interception des requêtes.

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!