Detaillierte Erklärung zur Verwendung von Vue-Resource-Interceptors

Vorwort

Abfangjäger

In einigen modernen Front-End-Frameworks sind Interceptors grundsätzlich ein sehr grundlegender, aber sehr wichtiger Bestandteil. Beispielsweise unterstützt Angular die Interceptor-Konfiguration nativ, und das Axios-Modul von VUE bietet uns ebenfalls eine Interceptor-Konfiguration. Was genau ist also ein Interceptor und wozu dient er?

Abfangjäger können uns helfen, das Problem zu lösen

• Hinzufügen einheitlicher Anforderungsparameter
• Fügen Sie beispielsweise X-Requested-With zum Header hinzu, oder der Client muss den Signatur- und Token-Verifizierungsmechanismus implementieren. Sie können beispielsweise $http.get('/files', params) schreiben, und der Interceptor hilft Ihnen, es in eine Anforderungsadresse wie http://www.xxxx.com/1/files einzufügen.
• Verarbeiten eines einheitlichen responseError
• Beispielsweise ruft der Wiederverbindungsmechanismus den Fehlercode ab und stellt die Verbindung wieder her. Wenn das Token beispielsweise abläuft, rufen Sie das Token erneut ab und senden Sie die Anforderung erneut.
• Es wäre zum Beispiel cool, die Fehlermeldung zu vereinheitlichen und eine Eingabeaufforderung für alle zurückgegebenen 404-Fehler bereitzustellen.

Wenn Sie vue-resource verwenden, um asynchrones Laden im Vue-Projekt zu implementieren, müssen Sie bei jeder HTTP-Anforderung auf jeder Seite eine Prüfung auf Token-Ablauf hinzufügen. Wenn der Token abgelaufen ist, müssen Sie zur Anmeldeseite springen. Wenn Sie dem HTTP-Anforderungsvorgang jeder Seite eine Beurteilung hinzufügen möchten, ist die Änderungsarbeitslast sehr groß. Verfügt Vue-Resource also über eine öffentliche Rückruffunktion, die alle Anforderungsantworten erfasst? Die Antwort ist ja!

Die Rolle der Interceptors von Vue-Resource ist genau die Lösung für diese Anforderung. Wenn nach jeder Antwort auf eine HTTP-Anforderung ein Interceptor festgelegt ist, wird zuerst die Interceptor-Funktion ausgeführt, um den Antworttext abzurufen und dann zu entscheiden, ob die Antwort zum Empfang zurückgegeben werden soll. Anschließend können wir dem Antwortstatuscode in diesem Interceptor eine Beurteilung hinzufügen, um zu entscheiden, ob zur Anmeldeseite gesprungen oder auf der aktuellen Seite geblieben werden soll, um weiterhin Daten abzurufen.

Installation und Referenz

NPM: npm install vue-resource --save-dev


/*Vue-Framework vorstellen*/
Vue von „vue“ importieren
/*Plugin für Ressourcenanforderungen einführen*/
Importieren Sie VueResource aus „vue-source“.

/*VueResource-Plugin verwenden*/
Vue.use(VueRessource)

Fügen Sie den folgenden Code zu main.js hinzu

Vue.http.interceptors.push((Anfrage, nächste) => {
 console.log(this) //Dies ist die Vue-Instanz der angeforderten Seite // Anfrage ändern
 request.method = 'POST'; //Einige Vorverarbeitungs- und Konfigurationsschritte können vor der Anfrage durchgeführt werden // Weiter zum nächsten Interceptor
  next((response) => {//Nach der Antwort ändern und logische Urteile über die Antwort fällen, bevor sie an then weitergegeben wird. Um zu beurteilen, ob das Token abgelaufen ist, fügen Sie es hier hinzu. Jede HTTP-Anfrage auf der Seite ruft zuerst diese Methode auf response.body = '...';
    Antwort zurückgeben;

 });
});

Interceptor-Beispiel

(1) Fügen Sie der Anfrage einen Ladeeffekt hinzu

Über den Inteceptor können wir für die Verarbeitung aller Anfragen einen Ladebildschirm hinzufügen: Zeigen Sie den Ladebildschirm vor dem Senden der Anfrage an und verbergen Sie den Ladebildschirm nach dem Erhalt der Antwort.
Die einzelnen Schritte sind wie folgt:

//1. Füge eine Ladekomponente hinzu <template id='loading-template'>
  <div Klasse = 'Overlay wird geladen'></div>
</Vorlage>

//2. Verwenden Sie die Ladekomponente als Unterkomponente einer anderen Vue-Instanz var help = new Vue({
  el: '#Hilfe',
  Daten: {
    Anzeige wird geladen: false
  },
  Komponenten:
    'wird geladen': {
      Vorlage: „#loading-template“,
    }
  }
})

//3. Mounten Sie die Vue-Instanz in ein HTML-Element <div id='help'>
  <wird geladen v-show='showWird geladen'></wird geladen>
</div>

//4. Abfangjäger hinzufügen
Vue.http.interceptors.push((Anfrage, nächste) => {
  wird geladen.show = true;
  nächste((Antwort) => {
    wird geladen.show = falsch;
    Antwort zurückgeben;
  });
});

Wenn der Benutzer jedoch zu lange auf dem Bildschirm bleibt, sind die Anzeigedaten möglicherweise nicht mehr die neuesten. Wenn der Benutzer zu diesem Zeitpunkt Daten löscht oder ändert und diese Daten von anderen Benutzern gelöscht wurden, gibt der Server einen 404-Fehler zurück. Da unsere Put- und Delete-Anfragen jedoch kein errorCallback verarbeiten, weiß der Benutzer nicht, ob sein Vorgang erfolgreich war oder fehlgeschlagen ist. Dieses Problem kann auch durch Inteceptor gelöst werden.

(2) Fügen Sie eine allgemeine Fehlerbehandlungsmethode für Anfragen hinzu

//1. Verwenden Sie weiterhin die obige Ladekomponente und fügen Sie unter dem Element #help ein Dialogfeld <div id='help'> hinzu
  <wird geladen v-show='showWird geladen' ></wird geladen>
  <modal-dialog :show='showDialog'>
    <header Klasse='Dialog-Header' Slot='Header'>
      <h3 class='dialog-title'>Serverfehler</h3>
    </header>
    <div Klasse='Dialog-Body' Slot='Body'>
      <p class='error'>Hoppla, auf dem Server sind einige Fehler aufgetreten, Fehlercode: {{errorCode}}.</p>
    </div>
  </modal-dialog>
</div>

//2. Füge der Datenoption der Hilfeinstanz zwei Eigenschaften hinzu var help = new Vue({
    el: '#Hilfe',
    Daten: {
      Anzeige wird geladen: false,
      showDialog: false,
      Fehlercode: ''
    },
    Komponenten:
      'wird geladen': {
        Vorlage: „#loading-template“,
      }
    }
  })

//3. Abfangjäger ändern
Vue.http.interceptors.push((Anfrage, nächste) => {
  Hilfe.showLoading = wahr;
  nächste((Antwort) => {
    wenn(!response.ok){
      Hilfe.Fehlercode = Antwort.Status;
      Hilfe.showDialog = true;
    }
    Hilfe.showLoading = falsch;
    Antwort zurückgeben;
  });
});

Dies ist das Ende dieses Artikels über die detaillierte Verwendung von Vue-Ressourcen-Interceptoren. Weitere relevante Inhalte zu Vue-Ressourcen-Interceptoren finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!