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

Implementierung des MySQL Shell import_table-Datenimports

Inhaltsverzeichnis 1. Einführung in import_table ...

CSS -webkit-box-orient: vertikale Eigenschaft nach der Kompilierung verloren

1. Ursache Die Anforderung besteht darin, zwei Ze...

So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen

Als ich mir selbst die Webentwicklung beibrachte,...

Kapselungsmethode der Vue-Breadcrumbs-Komponente

Vue kapselt die Breadcrumb-Komponente zu Ihrer In...

JS ES neue Funktionen Vorlagenzeichenfolge

Inhaltsverzeichnis 1. Was ist eine Vorlagenzeiche...

Detaillierte Erklärung zur Installation der PHP-Curl-Erweiterung unter Linux

Dieser Artikel beschreibt, wie man die PHP-Curl-E...

So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis

Im vorherigen Artikel habe ich das ausführliche T...

Vollständiges HTML des Upload-Formulars mit Bildvorschau

Das Upload-Formular mit Bildvorschaufunktion, der...

MySQL Serie 13 MySQL-Replikation

Inhaltsverzeichnis 1. Mit der MySQL-Replikation v...

IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern

<br />Verwandte Artikel: Web-Kenntnisse: Lös...

Verschieben Sie die MySQL-Datenbank unter Windows auf eine andere Festplatte

Vorwort Heute habe ich MySQL installiert und fest...

Nexus nutzt API für den Betrieb

Nexus bietet RestApi, aber einige APIs müssen noc...

JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien

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