Versprechenskapselung wx.request-Methode

Versprechenskapselung wx.request-Methode

Im vorherigen Artikel wurde die Implementierungsmethode zur Verwendung von Promise zur Kapselung des kleinen Programms wx.request vorgestellt. Dieser Artikel konzentriert sich auf die Methode zur Verwendung von Promise zur Kapselung von wx.request. Der spezifische Inhalt ist wie folgt:

Warum wx.request kapseln?

Denn wenn wir eine Schnittstelle anfordern, fordern wir manchmal mehrere APIs einer Schnittstelle an. Wenn wir keine Kapselung verwenden, wird das Schreiben von Code mühsam und führt auch zu Leistungsproblemen.

Die Kapselung erleichtert uns das Schreiben, verbessert das Benutzererlebnis und vereinfacht die Codeänderung.

Warum sollten Promises für Kapselungsentscheidungen verwendet werden?

Wenn wir ein WeChat-Applet schreiben, wenn wir wx.request schreiben, denke ich, dass jeder mit dieser Schreibmethode vertraut sein sollte, die der Schreibmethode von $.ajax ähnelt. Wir müssen mit der Kapselung von $.ajax vertraut sein, sodass es für uns nicht schwierig ist, sie mit Promise zu verknüpfen. Und unser WeChat-Applet unterstützt die es6-Syntax, daher ist Promise eine gute Wahl für die Kapselung.

Wie kapselt man wx.request?

Nachdem wir nun den Grund und die Werkzeuge für die Kapselung gefunden haben, besteht der nächste Schritt darin, das knifflige Ding wx.request zu kapseln. Erstellen Sie zunächst eine Datei in unserem Entwicklungstool

Wir verpacken es in einen großen Ordner und bearbeiten die Inhalte separat.

Bildbeschreibung hier einfügen

Zuerst verwenden wir in unserer Datei fetch.js promise, um wx.request zu kapseln:

//Versprechen kapselt wx.request
    module.exports=(URL,Daten,Methode)=>{
        //Definieren Sie zuerst das Versprechen
        let promise = neues Versprechen((lösen, ablehnen) => {
            wx.Anfrage({
                URL:URL,
                Daten:Daten,
                Methode:Methode,
 
                //Ausführen erfolgreich(res){
                    Entschlossenheit (res)
                },
 
                //Ausführen fehlgeschlagen (Fehler) {
                    ablehnen (Fehler)
                },
    })
    })
                // Pushen Sie das Versprechen, um das Versprechen zurückzugeben
    }

Dann können wir in unsere Datei api.js alles einfügen, was wir für eine einheitliche Verwaltung hier anfordern müssen:

//Schnittstelle managementmodule.exports={
    "Banner":"/h8/home/multidata"
}

Schließlich zentralisieren und verwenden wir es in unserer http.js-Datei:

//Datei einführen const api=require("./api")
    const fetch = erfordern("./fetch")
 
//Definieren Sie den Pfad let baseUrl="http://123.207.32.32:8000/api"
 
//Inhalt exportieren Funktion Banner(){
        Rückgabewert: fetch(baseUrl+api.banner,{},'get')
    }
 
    module.exports={
        Banner
    }

Nach der Kapselung müssen wir es in die globale Datei app.js importieren, bevor wir es verwenden können:

  const http = erfordern('./http/http.js')
 
    App({
      http,
    })

In der Datei verwenden:

    //App vorstellen
    const app = getApp()
 
    Seite({
      Daten: {
       Liste:[]
      }
 
    beim Laden: Funktion () {
        app.http.banner().then(res)=>{
            dies.setData({
                Liste:res.data.data.banner.list        
        })
            }
    }

Dies ist das Ende dieses Artikels über die Promise-Kapselung von wx.request. Weitere relevante Inhalte zur Promise-Kapselung von wx.request 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!

Das könnte Sie auch interessieren:
  • So verwenden Sie Promise zum Einkapseln des wx.request-Applets

<<:  So zeigen Sie Linux-SSH-Dienstinformationen und den Ausführungsstatus an

>>:  Diagramm der Installationszusammenfassung für MySQL 8.0.11

Artikel empfehlen

Ein kurzer Vortrag über Rx-responsive Programmierung

Inhaltsverzeichnis 1. Beobachtbar 2. Funktionen h...

Vue implementiert die Lupenfunktion der Produktdetailseite

In diesem Artikel wird der spezifische Code von V...

Umfassendes Verständnis der Node-Ereignisschleife

Inhaltsverzeichnis Knoten-Ereignisschleife Ereign...

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Der Link-In-Stil besteht darin, alle Stile in ein...

Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10

Inhaltsverzeichnis 1 Konfiguration der Java-Umgeb...

Verstehen Sie die Implementierung des Nginx-Standortabgleichs in einem Artikel

Da das Team Front-End und Back-End trennt, überni...

So konfigurieren Sie MySQL8 in Nacos

1. Erstellen Sie die MySQL-Datenbank nacos_config...

Implementierung einer Bildfragmentierungsladefunktion basierend auf HTML-Code

Heute werden wir einen fragmentierten Bildladeeff...

Eine kurze Diskussion über JS-Prototypen und Prototypenketten

Inhaltsverzeichnis 1. Prototyp 2. Prototypzeiger:...

Angular Cookie Lese- und Schreibvorgangscode

Lese- und Schreibvorgänge bei Angular Cookies, de...

Grundlagen der HTML-Bearbeitung (ein Muss für Anfänger)

Öffnen Sie DREAMWEAVER und erstellen Sie ein neue...

So veröffentlichen Sie ein lokal erstelltes Docker-Image auf Dockerhub

Heute zeigen wir Ihnen, wie Sie das lokale Docker...