vue+axios führt das Abfangen von Anmeldeanfragen durch

Dieses Mal werde ich Ihnen das Abfangen von Anmeldeanfragen durch vue+axios vorstellen. Was sind die Vorsichtsmaßnahmen für das Abfangen von Anmeldeanfragen durch vue+axios? sehen.

Wenn wir Schnittstellenanforderungen stellen, z. B. bei der Beurteilung des Anmeldezeitlimits, gibt die Schnittstelle normalerweise einen bestimmten Fehlercode zurück. Wenn wir dann für jede Schnittstelle eine zeit- und arbeitsaufwändige Schnittstelle beurteilen, können wir verwenden Der Interceptor führt ein einheitliches Abfangen von HTTP-Anfragen durch.

1. Axios installieren und konfigurieren

cnpm install --save axios 

Wir können eine JS-Datei erstellen, um diese einheitliche Verarbeitung durchzuführen Erstellen Sie wie folgt eine neue axios.js

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

und führen Sie dann diese js-Datei in main.js

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

ein, damit Sie axios zum Anfordern verwenden können Wird in Komponenten von This.axios verwendet.

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

Nur ​​über die Axios-Anforderungsschnittstelle kann es abgefangen werden. Jetzt kann es in axios.js abgefangen werden, und Sie können die von Ihnen benötigten Vorgänge in den beiden Zuständen ausführen 🎜>

Ergänzung:

Axios verwendet Interceptoren, um alle http-Anfragen einheitlich zu verarbeiten

Axios verwendet Interceptoren

, um Anfragen oder Antworten abzufangen, bevor sie bis dahin verarbeitet oder abgefangen werden.

•http-Request-Interceptor

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

•http-Response-Interceptor

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

• Interceptoren entfernen

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

•Abfangjäger für benutzerdefinierte Axios-Instanzen hinzufügen

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

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Vue-Projektpaketierungsschritte nach Umgebung

Vermeiden Sie Dom-Missverständnisse bei der Verwendung von Angular2

Das obige ist der detaillierte Inhalt vonvue+axios führt das Abfangen von Anmeldeanfragen durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!