Analysieren Sie, wie Uniapp den Schnittstellendomänennamen dynamisch erhält

Analysieren Sie, wie Uniapp den Schnittstellendomänennamen dynamisch erhält

Hintergrund

Der Domänenname der Schnittstelle ist nicht fest codiert, sondern wird dynamisch abgerufen. Die konkrete Implementierung besteht darin, den tatsächlichen Schnittstellendomänennamen durch das Lesen einer statischen JSON-Datei festzulegen. Der Vorteil besteht darin, dass der ursprüngliche Domänenname möglicherweise blockiert ist, sodass Sie die Konfigurationsdatei direkt im Hintergrund ändern können. Andernfalls ist das h5-Projekt möglicherweise in Ordnung, die App muss jedoch erneut veröffentlicht werden.

Code

// httpService.js kapselt uni.request.

Beim Datenanforderungseingang wird zuerst der Domänenname abgerufen, d. h. die Methode config.requestRemoteIp wird ausgeführt

Konfiguration aus „@/config“ importieren
Vue von „vue“ importieren
importiere cacheData aus '@/service/cacheData.js'
const MockUtil = () => import('@/libs/mockUtil.js')
Speicher aus „@/libs/storage.js“ importieren

Klasse HttpRequest {

    /**
     * Schnittstellendaten lesen * @param Optionen Informationen anfordern * @param noMock Wenn Sie Mock-Daten als Ganzes verwenden, können Sie eine separate Schnittstelle festlegen, um echte Daten anzufordern * @param cacheId
     * @returns {*}
     */
    asynchrone Anfrageauflösung (Optionen, URL-Anpassung = '', noMock = false, Cache-ID = null) {
        let remoteIP = await config.requestRemoteIp(); // Den Domänennamen der Schnittstellenanforderung dynamisch festlegen, if (process.env.NODE_ENV === 'development' && config.isMockApi && !noMock) {
            gib dies zurück.getMockData(Optionen)
        }
        wenn (cacheId && cacheData[cacheId]) {
            gib dies zurück.testHttp(cacheData[cacheId])
        }
        returniere neues Promise((lösen, ablehnen) => {
            let baseUrl = process.env.NODE_ENV === 'Entwicklung'? config.baseUrl.dev: config.baseUrl.pro;
            Optionen.URL = Basis-URL + Optionen.URL + `${urlCustom}`;
            uni.anfrage(
                Objekt.zuweisen({
                    Erfolg: (res) => {
                        wenn (res.statusCode != '200'){
                            uni.showToast({
                                Titel: 'Serverfehler:' + res.statusCode,
                                Symbol: „keine“
                            })
                            ablehnen()
                        }
                        sonst wenn (res.data.code == 10001) {
                            Speicher.removeToken();
                            lass vue = neues Vue();
                            vue.$store.dispatch('Abmelden')
                            vue.$routeUtil.reLaunch('main');
                        }
                        
                        sonst wenn (res.data.code != 200) {
                            wenn (res.data.message) {
                                uni.showToast({
                                    Symbol: „keine“,
                                    Titel: res.data.message
                                });
                            }
                            ablehnen(res.data)
                        } anders {
                            wenn (Cache-ID) {
                                cacheData[cacheId] = res.data.data
                            }
                            auflösen(res.data.data)
                        }
                    },
                    fehlgeschlagen: err => {
                        uni.showToast({
                            Titel: 'Serverfehler',
                            Symbol: „keine“
                        })
                    }
                }, Optionen)
            );
        })
    }

    /**
     *Mock-Daten werden bei Bedarf importiert* @param-Optionen
     * @returns {*}
     */
    async getMockData(Optionen) {
        const Mock = warte auf MockUtil()
        const MockUrl = Mock.default[Optionen.URL]
        wenn (Typ von MockUrl !== 'Funktion') {
            gib dies zurück.testHttp(MockUrl)
        }
        wenn (Optionen.Methode === 'post') {
            gib dies zurück.testHttp(MockUrl(options.data, false))
        }
        gib dies zurück.testHttp(MockUrl(options.params, true))
    }
    testHttp(Daten) {
        let pro = neues Versprechen(Funktion(auflösen, ablehnen) {
            setzeTimeout(Funktion() {
                auflösen (Daten)
            }, 50)
        })
        Rückkehrprofi
    }
}
exportiere standardmäßig neue HttpRequest()

// konfiguration.js

const konfiguration = {
  isMockApi: falsch,
  // Anfrage-URL: 'http://qiniu.eightyin.cn/teacherpath.json?time=' + Math.random().toString(36),
  requestUrl: 'http://qiniu.eightyin.cn/teacherpathtest.json?time=' + Math.random().toString(36),
  Basis-URL: {
     
    Entwickler: '',
    Profi: ''
  },
  img: {
    ossDomain: ''
  },
  uuid: Math.random().toString(36).substring(3, 20),
  requestRemoteIp: () => {
      console.log('Konfiguration:', Konfiguration)
      wenn (config.RemoteIpInited)
        gibt Promise.resolve() zurück;
        returniere neues Promise((lösen, ablehnen) => {
            uni.request({
                URL: config.requestUrl,
                Erfolg: (Antwort) => {
                    //zu testen// config.baseUrl.pro = response.data.data.path;
                    config.baseUrl.dev = "http://bayin5.mycwgs.com/";
                    config.img.ossDomain = response.data.data.ossDomain;
                    config.RemoteIpInited = true;
                    lösen()
                },
                fehlgeschlagen: () => {
                    config.RemoteIpInited = true;
                    lösen()
                }
            })
        });
  }
}

Standardkonfiguration exportieren

Oben finden Sie eine detaillierte Analyse, wie Uniapp den Schnittstellendomänennamen dynamisch erhält. Weitere Informationen zum dynamischen Erhalt des Schnittstellendomänennamens durch Uniapp finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Methoden und Vorschläge zur Uniapp-Projektoptimierung
  • So entwickeln Sie Uniapp mit vscode
  • Der vollständige Code der im Uniapp-Applet enthaltenen Radardiagrammkomponente
  • So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp
  • Detaillierte Erläuterung der dynamischen Änderung des Elementknotenstils in Uniapp

<<:  Detaillierte Erläuterung der Ausführung von SQL-Anweisungen (Übersicht über die MySQL-Architektur -> Abfrageausführungsprozess -> SQL-Analysereihenfolge)

>>:  Zabbix-Überwachungslösung – die neueste offizielle Version 4.4 [empfohlen]

Artikel empfehlen

Häufige Fehler beim Schreiben von HTML-Tags

Wir sollten besser aufpassen, denn die HTML-Poliz...

Implementierung eines Web-Rechners auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript...

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Dieser Artikel stellt einige Aspekte von HTML-Tag...

Lernen wir JavaScript objektorientiert kennen

Inhaltsverzeichnis JavaScript-Prototypenkette Obj...

vue cli3 implementiert die Schritte der Verpackung nach Umgebung

Das mit CLI3 erstellte Vue-Projekt wird als Nullk...

MySQL 5.7.10 Installationsdokumentation Tutorial

1. Installieren Sie Abhängigkeitspakete yum -y in...

Delegieren von Berechtigungen in Linux mit Sudo

Einführung in die Sudo-Autoritätsdelegierung su-S...

React-Konfiguration px-Konvertierung rem-Methode

Installieren Sie zugehörige Abhängigkeiten npm ic...

Vue implementiert den Schnittstellen-Gleiteffekt

In diesem Artikelbeispiel wird der spezifische Co...

Wie werden Vue-Komponenten analysiert und gerendert?

Vorwort In diesem Artikel wird erklärt, wie Vue-K...

HTML-Tipps, um Ihren Code semantisch zu gestalten

HTML-Semantik scheint ein alltägliches Problem zu...

Docker Link realisiert die Containerverbindung

Inhaltsverzeichnis 1.1. Netzwerkzugriff zwischen ...

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Sich gut zu ernähren und ausreichend zu schlafen,...