vue+axios effectue une interception des demandes de connexion

Cette fois je vais vous présenter l'interception des demandes de connexion faites par vue+axios. Quelles sont les précautions pour faire des demandes de connexion interceptées par vue+axios. Ce qui suit est un cas pratique, prenons un. regarder.

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

•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 () {/*...*/});

Explication détaillée des étapes de packaging du projet Vue par environnement

Évitez les malentendus Dom lors de l'utilisation d'Angular2

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!