Maison > interface Web > js tutoriel > le corps du texte

vue+axios intercepte les demandes de connexion

php中世界最好的语言
Libérer: 2018-05-02 14:36:28
original
1363 Les gens l'ont consulté

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
Copier après la connexion

puis introduisez ce fichier js dans main.js

import axios from './axio'; 
Vue.prototype.$axios = axios;
Copier après la connexion

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); 
   });
Copier après la connexion

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);
 });
Copier après la connexion

•Intercepteur de réponses http

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

• Supprimer les intercepteurs

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
Copier après la connexion

•Ajouter des intercepteurs pour les instances axios personnalisées

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal