Vue ajoute un intercepteur de requêtes et l'utilisation de l'intercepteur vue-resource

Cet article présente principalement Vue pour ajouter des intercepteurs de requêtes et l'utilisation d'intercepteurs de ressources vue. Les amis dans le besoin peuvent s'y référer

Phénomène<.>

Traitement unifié des erreurs et des informations de demande de configuration

2. Solution

1. Installer axios, commande :

npm install axios --save-dev

2. Créez un nouveau fichier axios.js dans le répertoire config du répertoire racine. Le contenu est le suivant :

import axios from 'axios'
// 配置默认的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club' 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

<🎜. >3. Dans main.js, référencez et configurez un alias ($ajax) pour appeler :

import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios

Comme indiqué dans la figure :

4. Application, Un post de connexion tel que :

this.$ajax({
　　method: 'post',
　　url: '/login',
　　data: {
　　　　'userName': 'xxx',
　　　　'password': 'xxx'
　　}
}).then(res => {
　　console.log(res)
})

ps : Jetons un coup d'œil à l'utilisation de vue-resource interceptor Dans le processus d'utilisation de vue-resource dans le projet vue, une exigence a été temporairement ajoutée, qui nécessite l'ajout d'un jugement sur l'expiration du jeton dans toute requête http sur n'importe quelle page . Si le jeton a expiré, vous devez accéder à la page de connexion. Si vous souhaitez ajouter un jugement à l'opération de requête http dans chaque page, cela représentera un très gros travail de modification. Alors, vue-resource a-t-il une fonction de rappel publique qui capture toute réponse à une demande ? La réponse est oui !

Les intercepteurs de vue-resource sont la solution parfaite à ce besoin. Après chaque réponse à une requête HTTP, si l'intercepteur est défini comme suit, la fonction d'intercepteur sera d'abord exécutée pour obtenir le corps de la réponse, puis il sera décidé s'il faut renvoyer la réponse à

puis pour réception. Nous pouvons ensuite ajouter un jugement sur le code d'état de la réponse à cet intercepteur pour décider s'il faut accéder à la page de connexion ou rester sur la page actuelle et continuer à obtenir des données.

Le code suivant est ajouté à main.js

Vue.http.interceptors.push((request, next) => {
　console.log(this)//此处this为请求所在页面的Vue实例
 // modify request
 request.method = 'POST';//在请求之前可以进行一些预处理和配置
 // continue to next interceptor
　　next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法
 　　response.body = '...';
　　　　return response;
 });
});

Avant de connaître cette méthode, j'ai pensé à une méthode stupide, mais aussi Cela peut réduire la charge de travail de modification dans une certaine mesure. La méthode consiste à lier une méthode

à Vue au lieu de la méthode

, et à ajouter un $ avant $http à la requête http de chaque page. this.$$http.getthis.$http.get

// ajax.js
function plugin(Vue){
 Object.defineProperties(Vue.prototype,{
  $$http:{
   get(){
    return option(Vue);
   }
  }
 })
}
function option(Vue){
 let v = new Vue();
 return {
  get(a,b){
   let promise = new Promise(function(reslove,reject){
    v.$http.get(a,b).then((res)=>{
     reslove(res)
    },(err)=>{
　　　　　　　　　　　　//处理token过期问题。
    })
   })
   return promise;
  }
 }
}
module.exports=plugin;
//main.js
import ajax from './ajax.js'
Vue.use(ajax)

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

Comment résoudre le problème selon lequel la méthode vuex dans le composant parent met à jour l'état et le composant enfant ne peut pas être mis à jour et rendu à temps

dans Introduction à la première utilisation de la méthode d'installation du stylet après initialisation créée par le projet 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!