intercepteur de demande de connexion axios

Cette fois, je vous présente l'intercepteur de demande de connexion axios. Quelles sont les précautions pour implémenter l'intercepteur de demande de connexion axios. Voici les cas réels, jetons un coup d'oeil.

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 l'instance axios personnalisée

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

Comment les projets Vue doivent être empaquetés par environnement

Étapes spécifiques pour l'utilisation de Vuex dans React

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!