So implementieren Sie eine elegante Lösung für Front-End-Ajax-Anfragen

Dieses Mal zeige ich Ihnen, wie Sie eine elegante Lösung für Front-End-Ajax-Anfragen implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung einer eleganten Lösung für Front-End-Ajax-Anfragen? Schauen Sie mal rein.

Vorwort

AJAX, Asynchrones JavaScript und XML (asynchrones JavaScript und XML), eine Möglichkeit, interaktives Web zu erstellen Entwicklung von Technologielösungen für Webanwendungen.

Asynchrones JavaScript:

Verwenden Sie [JavaScript-Sprache] und verwandte [vom Browser bereitgestellte Klassenbibliothek]-Funktionen, um eine Anfrage an den Server zu senden, [führen Sie automatisch eine bestimmte aus Eine JavaScript-Callback-Funktion ].

PS: Der gesamte Prozess der obigen Anfrage und Antwort erfolgt [heimlich] ohne jegliche Wahrnehmung auf der Seite.

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

Der http-Client dieses Artikels ist axios

Lassen Sie mich zunächst eine Geschichte erzählen

Ähnlich wie axios Die API, die Promise unterstützt, ist bereits sehr benutzerfreundlich. Nachdem die Anfrage erfolgreich war, können wir die vom Backend zurückgegebenen Daten aus der Antwort erhalten. Beispiel:

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

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.

Dann stellt uns das eigentliche Szenen-Backend die Daten 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"
}

Also, response.data.obj sind 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 Daten mehr Objekt. Es wurde in JSONString geändert, bitte führen Sie eine Verarbeitung durch~"

Dann müssen wir ja, jede Schnittstelle, jede einzelne, in JSON.parse(response.data).obj, Halbwertszeit, ändern!

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

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. . .

Später werden wir

ES6-Proxy wird verwendet, um das Standardverhalten bestimmter Vorgänge zu ändern, was einer Änderung auf Sprachebene entspricht. Es gehört also zu einer Art „Meta-Programmierung“, also dem Programmieren in Programmiersprache.

Proxy kann als Einrichtung einer „Abfangschicht“ vor dem Zielobjekt verstanden werden, die zunächst diese Abfangschicht passieren muss, sodass ein Mechanismus zum Abfangen des externen Zugriffs bereitgestellt wird. Filtern und neu schreiben.

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 erhalten Sie zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax+PHP-Code zum Ändern des Status und Löschen ohne Aktualisierung

So implementieren Sie den Ajax-Client asynchron Aufruf des Servers

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine elegante Lösung für Front-End-Ajax-Anfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!