Ajax-Anfragemethode im Axios-Client

Dieses Mal werde ich Ihnen die Ajax-Anfragemethode im Axios-Client vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Ajax-Anfragemethode im Axios-Client? .

Vorwort

AJAX, Asynchronous JavaScript and XML (asynchrones JavaScript und XML), ist eine Webentwicklungstechnologielösung zum Erstellen interaktiver Webanwendungen.

Asynchrones JavaScript:

Verwenden Sie die Funktionen von [JavaScript-Sprache] und zugehörigen [vom Browser bereitgestellten Klassenbibliotheken], um Anforderungen an den Server zu senden. Nachdem der Server die Anforderung verarbeitet hat, [führen Sie automatisch eine JavaScript--Rückruffunktion aus].

PS: Der gesamte Prozess der oben genannten Anfrage und Antwort wird [heimlich] durchgeführt, ohne dass es auf der Seite zu einer Wahrnehmung kommt.

Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf den Text dieses Artikels.

Der http-Client für diesen Artikel ist axios

Erzähl mir zuerst eine Geschichte

APIs wie Axios, die Promise unterstützen, sind bereits sehr benutzerfreundlich. Nachdem die Anfrage erfolgreich war, können wir die vom Backend zurückgegebenen Daten aus der Antwort erhalten. Zum Beispiel:

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

Die Daten befinden sich in response.data, was bedeutet, dass wir für jede Anfrage einen weiteren Prozess durchführen müssen, um die tatsächlichen Daten zu erhalten.

In tatsächlichen Szenarien stellt uns das Backend die Daten dann grundsätzlich nicht direkt zur Verfügung. Die Struktur von response.data sieht beispielsweise so aus:

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

Daher sind response.data.obj die Daten, die wir wirklich wollen, also müssen wir für jede Anfrage einen weiteren Prozess durchführen =_=

Plötzlich sagte das Backend eines Tages: „response.data ist kein Objekt mehr, es wurde in JSON geändert string, bitte führen Sie etwas Verarbeitung durch~“.

Und ja, jede Schnittstelle, jede einzelne, wir müssen auf JSON.parse(response.data).obj, Halbwertszeit, umstellen!

Wenn das Backend sagt: „Ich habe das Objekt erneut geändert, bitte machen Sie die vorherige Verarbeitung rückgängig~“. . .

Wenn das Backend sagt: „Nicht alle sind Objekte, einige sind JSON-Strings. Einzelheiten finden Sie im aktualisierten Schnittstellendokument~“. . .

Wenn wir uns nie getroffen hätten. . .

Der Rest von uns

Der ES6-Proxy wird verwendet, um das Standardverhalten bestimmter Vorgänge zu ändern. Dies entspricht einer Änderung auf Sprachebene, es handelt sich also um eine Art „Metaprogrammierung“, also um die -Programmierung Sprache zum Programmieren.

Unter Proxy kann das Einrichten einer „Abfangschicht“ vor dem Zielobjekt verstanden werden. Der externe Zugriff auf das Objekt muss zunächst diese Abfangschicht durchlaufen und bietet daher einen Mechanismus zum Filtern und Umschreiben des externen Zugriffs.

Um die oben genannten Probleme zu lindern, müssen wir alle Schnittstellenanforderungen einheitlich kapseln. Selbst wenn sich das Backend immer wieder ändert, müssen wir auf diese Weise nur eine Stelle oder gar keine Änderungen vornehmen!

const apiService = new Proxy(axios, {
 get (target, propKey, receiver) {
 return function (...args) {
 return target[propKey](...args)
 .then((res) => {
  const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj;
 })
 .catch((err) => {
  throw err;
 });
 }
 }
});

Der entsprechende Schnittstellenanforderungsteil wurde geändert in:

apiService.get('/user/12345')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.log(error);
 });

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Wie man die Verknüpfung zweier zTree auf einer einzigen Seite realisiert

Wie man den WeChat aufruft Sharing-Funktion in NodeJS

Das obige ist der detaillierte Inhalt vonAjax-Anfragemethode im Axios-Client. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!