Einführung in die Methode zur Verwendung von Axios Request Interception in Vue

Dieser Artikel bietet Ihnen eine Einführung in die Methode zum Abfangen von Axios-Anfragen. Ich hoffe, dass er für Freunde hilfreich ist.

1. Vorwort

Die grundlegende Verwendung von Axios wird nicht ausführlich in den Axios-Dokumentanweisungen erläutert. Axios-Chinesisch-Anweisungen

Hier und Bitte teilen Sie die Verwendung von Axios Interception in tatsächlichen Projekten

Viele Leute haben die Interceptor-Spalte in der offiziellen Axios-Dokumentation gesehen. Einige Leute sind vielleicht etwas verwirrt, weil das Dokument Ihnen nur sagt, dass es das gibt Es sagt Ihnen nicht, unter welchen Umständen es verwendet wird. Viele Anfänger werden die Verwendung des Axios-Interceptors aufgeben. Schließlich kann auf den Interceptor verzichtet werden, aber durch die Verwendung des Interceptors wird viel unnötiger Code auf der Seite reduziert.

2. Das im vorherigen

-Projekt verwendete UI-Framework ist iview

Die folgenden benutzerfreundlichen Tipps verwenden alle die Nachrichtenaufforderungskomponente von iview ui, wie zum Beispiel diese.$Message .xxx
/api/request ist nur eine Beispielschnittstelle. Die tatsächliche Entwicklung verwendet die vom Backend bereitgestellte Schnittstelle.
Code ist der Hintergrundstatuscode. Fragen Sie mich nicht, warum sich mein Rückkehrcode von Ihrem unterscheidet ... Diese müssen alle mit dem Hintergrund kommuniziert und vereinbart werden.
Der verwendete Anforderungsheader ist: axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; Warum dieser Anfrageheader verwendet wird, können Sie in meinem anderen Artikel über das Senden von zwei Anfragen lesen. Es gibt ein OPTIONS-Anfrageproblem
, weil diese Anfrage verwendet wird Sie müssen das QS-Modul verwenden, da das Backend diese Daten sonst nicht erkennt.

3. Keine Verwendung von Request Interception

Es ist auch möglich, wenn Request Interception nicht verwendet wird, aber es wird viel Code hinzufügen. Nehmen wir die Anmeldeseite als Beispiel.

Eine einfache, schnörkellose Seite, |ω・)

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理，状态为10时为登录超时
    if(data.data.code === 10){
        this.$Message.error("登录已超时，请重新登录")
        this.$router.push("/login")
    //其余错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

Wenn Wenn das Abfangen von Anfragen nicht verwendet wird, muss jede Anfrage und jeder Status speziell verarbeitet werden. Wenn es Dutzende von Sonderstatusanfragen und viele Anfragen für jede Seite gibt, wird die Seite sehr lang, aufgebläht und schwer zu warten.

3. Request Interception verwenden

Wir können den gleichen Request Return Code extrahieren und ihn in die Request Interception schreiben
Nachdem wir das Abfangen eingerichtet haben, nachdem wir Der Komponentencode kann stark vereinfacht werden. Nehmen wir als Beispiel die Anmeldeschnittstelle:

in main.js

//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {

  //这个例子中data是loginName和password
  let REQUEST_DATA = request.data
  //统一进行qs模块转换
  request.data = qs.stringify(REQUEST_DATA)
  //再发送给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
  //特殊错误处理，状态为10时为登录超时
  if (response.data.code === 10) {
    iView.Message.error("登录已超时，请重新登录");
    router.push("/login")
  //其余错误状态处理    
  } else if (response.data.code != 0) {
    iView.Message.error(response.data.msg)
  //请求成功
  } else if(response.data.code === 0){
    //将我们请求到的信息返回页面中请求的逻辑
    return response;
  }
 //......

}, function (error) {
  return Promise.reject(error);
});

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

Auf diese Weise fügen wir Axios-Anfragen das Abfangen hinzu, was a reduzieren kann viel Codelogik und Seite Es ist besser lesbar und wartbar

4. Andere

Dies ist die grundlegendste Verwendung von Axios Interception, natürlich ist es mehr als das , wir können auch erweitern und mehr Dinge tun, Axios Interception kann Ihnen immer helfen. Sie müssen Schlussfolgerungen aus einem Beispiel ziehen , wie z. B. Anforderungssignatur festlegen.

Anforderungssignatur ist eine zwischen Front-End und Back-End vereinbarte Kommunikationsmethode, die bis zu einem gewissen Grad die Datensicherheit gewährleisten kann

Nehmen wir diese Anmeldeseite als Beispiel

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

Bevor wir die httpRequest-Dateninformationen an den Hintergrund senden, signieren und verschlüsseln wir die Daten
In main.js fangen wir die gesendeten Daten ab

//请求发送拦截
axios.interceptors.request.use((request) => {

  //获取请求的数据，这里是loginName和password
  let REQUEST_DATA = request.data
  //获取请求的地址，这里是/api/request
  let REQUEST_URL = request.url
   
  //设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
  request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
  //发送请求给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//已封装好的签名函数
function requestDataFn(data, method) {

  let postData = {}

  //时间戳，时间戳函数不作展示，也是已封装好的
  postData.timestamp = getNowFormatDate();

  //请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
  postData.session = localStorage.getItem('session') || '';
  postData.secretKey = localStorage.getItem('secretKey') || '';
  
  //请求的地址，这里是/api/request
  postData.method = method;
    
  //请求的数据这里是loginName和password，进行base64加密
  let base64Data = Base64.encode(JSON.stringify(data));
   
  //设置签名并进行md5加密
  let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
   
  //把数据再次进行加密
  postData.data = encodeURI(base64Data);

  postData.signature = signature;
   
  return postData
}

Dabei Auf diese Weise schließen wir die Datenverschlüsselung und -signatur ab und senden sie dann an den Hintergrund.

Hinweis: Dies ist nur ein Beispiel. Wenn eine Signatur erforderlich ist, ist die Vorgehensweise beim Signieren das Ergebnis der Kommunikation zwischen dem Front-End und dem Back-End!
Die Verwendung von Axios Request Interception ist weitaus mehr als das. Die konkrete Verwendung hängt von der tatsächlichen Arbeit und den tatsächlichen Projekten ab.

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Verwendung von Axios Request Interception in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!