Detaillierte Erläuterung der Vorverarbeitungsmethode für WeChat-Applet-Anforderungen

Frage

Da einige unserer Seiten Daten im Onload-Modus anfordern und dann die Ansicht rendern, können wir die Daten früher anfordern, wenn wir den Datenanforderungsschritt vor den Seitensprung des Miniprogramms verschieben können. Die Auswirkung der Optimierung hängt von der für den Seitensprung benötigten Zeit ab.

brauchen

Um die Sprungzeit voll auszunutzen und Schnittstellendaten im Voraus anzufordern, aber gleichzeitig den Aufwand für die Änderung alter Projekte zu minimieren, ist eine Methode zur Anforderungsvorverarbeitung erforderlich. Da das kleine Programmprojekt, für das ich derzeit verantwortlich bin, Axios zum Anfordern von Schnittstellendaten verwendet, werde ich hier nur ein Beispiel für die Transformationsidee von Post in Axios geben. Hier schreibe ich die Post-Methode neu, um die Schnittstellen zwischenzuspeichern, die bei der Anforderung im Voraus angefordert werden müssen, und gebe das Versprechen der ersten Anforderung zurück, wenn die zweite Anforderung gestellt wird, sodass keine neue Anforderung initiiert werden muss.

Konkrete Schritte

1. Ändern Sie die Post-Methode

http-Datei

let instance = axios.create({ // Eine Axios-Anforderungsinstanz erstellen // Einen Teil des Codes weglassen});

let { post } = instance; // Speichere die ursprüngliche Post-Methode let cache = {}; // Fordere den Cache an instance.post = function(...list) {

 lass [URL, Daten = {}] = Liste;

 if (cache[url]) { // Gib das vorab angeforderte Versprechen zurück
 lass vor = cache[url];
 Cache[URL] löschen;
 Rückkehr vor;
 }

 if (data.pre) { //Verwende pre als Vorabanforderung, um zu bestimmen, ob es sich um eine Vorabanforderung handelt. delete data.pre;
 Cache[URL] = Post(...Liste)
 Cache [URL] zurückgeben;
 }

 return post(...list); //normale Anfrage}

2. Verwendung

Die Seite vor dem Sprung, also die vorherige Seite

// Etwas Code weglassen...

// Dies sind die Daten, die von der Schnittstelle auf der nächsten Seite angefordert werden sollen. Fordern Sie sie im Voraus an, bevor wx.navigateTo springt, und speichern Sie sie.
$http.post('/act/activities/lucky:search', { activityId: 12 , pre: true })

wx.nextTick(() => { //Mit wx.nextTick kann zuerst die obige Anfrage gesendet werden und dann gesprungen werden wx.navigateTo({
 URL: `${TYPE_TO_ROUTE_MAP[templateType]}?id=${activity.activityId}`
 });
})

// Etwas Code weglassen...

Wirkung

Kein Vorladen verwenden

Verwenden von Preload

Der Breitenunterschied der roten Kästen gibt an, wie viel Zeit benötigt wird, um die Schnittstellendaten vorab anzufordern. Dieser beträgt ca. 100ms. Da die folgende statische Ressourcenadresse aus den Schnittstellendaten stammt, entspricht dies einer Verkürzung der Ressourcenladezeit nach der Überlastung um etwa 100 ms.

Zusammenfassen

• Das Prinzip besteht darin, die Zeit des Applet-Sprungs zu nutzen, um Daten im Voraus anzufordern. Daher ist es für Mobiltelefone mit schlechter Leistung von Vorteil. Obwohl es im Entwicklertool etwa 100 ms zu sparen scheint, gibt es die folgenden zwei Einschränkungen:
• Die Seite wird geladen und die Daten in der vorab angeforderten Schnittstellendaten werden benötigt
• Es ist notwendig, eine Voranfrage auf der vorherigen Seite zu initiieren und die nextTick-Verarbeitung beim Sprung durchzuführen

Im Ergebnis sind die Vorteile dieser Optimierung für das gesamte Projekt tatsächlich eher nutzlos.

Dies ist das Ende dieses Artikels über die Vorpositionierung von WeChat Mini-Programmanfragen. Weitere relevante Inhalte zur Vorpositionierung von Mini-Programmanfragen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!