Explication détaillée de l'utilisation de l'intercepteur Vue-resource

Le soi-disant intercepteur consiste à intercepter certains fichiers. Cet article présente principalement Vue pour ajouter un intercepteur de requêtes et l'utilisation de l'intercepteur vue-resource. Les amis qui en ont besoin peuvent s'y référer.

1. Phénomène

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

2. Solution

1. Installez 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. et configurez un alias ( $ajax) pour appeler :

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

Comme le montre la figure :

4 Application, une publication connectée telle que :

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

<.>ps : Jetons un coup d'œil aux utilisations de l'intercepteur vue -resource

Dans le processus d'utilisation de vue-resource dans le projet vue, une exigence a été temporairement ajoutée, qui nécessite d'ajouter un jugement sur l'expiration du jeton dans n'importe quel http demande 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 exactement la solution à 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 elle peut aussi réduire dans une certaine mesure la charge de travail de modification. La méthode consiste à lier une méthode this.$$http.get à Vue au lieu de la méthode this.$http.get. Ajoutez simplement un $ avant $http pour la requête http de chaque page.

// 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)

Comment tout le monde a-t-il appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Idées sur la façon d'implémenter divers intercepteurs en php

Exemple d'analyse de code d'intercepteur en php

Explication détaillée de l'intercepteur de page pour le développement de l'applet WeChat

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!