vue+axios intercepte les demandes de connexion

Cette fois, je vais vous présenter vue+axios pour intercepter les demandes de connexion. Quelles sont les précautions pour que vue+axios intercepte les demandes de connexion. Ce qui suit est un cas pratique, jetons un coup d'œil.

Lorsque nous effectuons des requêtes d'interface, par exemple lorsque nous jugeons le délai de connexion, l'interface renvoie généralement un code d'erreur spécifique. Ensuite, si nous jugeons une interface longue et laborieuse pour chaque interface, nous pouvons utiliser The. L'intercepteur effectue une interception de requête http unifiée.

1. Installer et configurer axios

cnpm install --save axios 

Nous pouvons créer un fichier js pour effectuer ce traitement unifié , créez un nouveau axios.js, comme suit

import axios from 'axios' 
import { Indicator } from 'mint-ui'; 
import { Toast } from 'mint-ui'; 
// http request 拦截器 
axios.interceptors.request.use( 
  config => { 
    Indicator.open() 
    return config; 
  }, 
  err => { 
    Indicator.close() 
    return Promise.reject(err); 
  }); 
// http response 拦截器 
axios.interceptors.response.use( 
  response => { 
    Indicator.close() 
    return response; 
  }, 
  error => { 
    Indicator.close() 
  }); 
export default axios

puis introduisez ce fichier js dans main.js

import axios from './axio'; 
Vue.prototype.$axios = axios;

afin que vous puissiez utiliser axios pour demander, ce qui peut être utilisé dans les composants This.axios appelle

this.$axios({ 
    url:requestUrl+'homePage/v1/indexNewPropertiesResult', 
    method:'POST', 
   }).then(function(response){ //接口返回数据 
    console.log(response) 
    that.modulesArr=response.data.data.modules; 
//   that.getRecommendGoods(0); 
   });

Ce n'est qu'en utilisant l'interface de requête axios qu'il peut être intercepté. Il peut désormais être intercepté dans axios.js et vous pouvez effectuer les opérations dont vous avez besoin dans les deux états<.>

Supplément :

axios utilise des intercepteurs pour traiter toutes les requêtes http de manière uniforme

axios utilise des intercepteurs

pour intercepter les demandes ou les réponses avant qu'elles ne soient traitées d'ici là ou interceptées.

•Intercepteur de requêtes http

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });

•Intercepteur de réponses http

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
 }, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
 });

• Supprimer les intercepteurs

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

•Ajouter des intercepteurs pour les instances axios personnalisées

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, par contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de dev à prd

Explication détaillée des étapes d'utilisation de dev -serveur dans webpack

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!