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

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

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!