So kapseln Sie Axios in Vue

npm install axios; // Axios installieren

Axios von „Axios“ importieren

const baseUrl = API_BASE_URL // In webpackConfig eingefügt durch das Webpack-Plugin DefinePlugin
    .plugin('definieren')
        .verwenden(erfordern('webpack/lib/DefinePlugin'), [{
            // NODE_ENV-Umgebungsvariable, die Entwicklungsumgebung ist: "Entwicklung", um sicherzustellen, dass das Paket der Testumgebung mit der Produktionsumgebung übereinstimmt, sind sowohl die Testumgebung als auch die Produktionsumgebung "Produktion".
            'Prozess.Umgebung.NODE_ENV': JSON.stringify(Prozess.Umgebung.NODE_ENV),
            // Die aktuelle Anwendungsumgebung (Entwicklungsumgebung: „dev“, Testumgebung: „test“, Produktionsumgebung: „prod“)
            'Prozess.Umgebung.APP_ENV': JSON.stringify(Prozess.Umgebung.APP_ENV),
            //Anforderungsadresse der Backend-Schnittstelle 'API_BASE_URL': JSON.stringify(config.meshProp('apiBaseUrl')),
            // Homepage-Pfad 'APP_INDEX_PATH': JSON.stringify(indexPath),
            // Routing-Modus „APP_ROUTER_MODE“: JSON.stringify(config.meshProp(„routerMode“)),
            // Ob die Element-Komponentenbibliothek „APP_USE_ELEMENT“ verwendet werden soll: JSON.stringify(config.meshProp('useElement')),

}])

const Pfad = require('Pfad')
const os = erfordern('os')
const packageName = 'focm' // Projektpaketname const localIP = getLocalIP() // Lokale IP-Adresse module.exports = {
    //Standardkonfiguration default: {
        //Systemname, der zum Festlegen des Titels im Seitenkopf verwendet wird
        Anwendungsname: "xxxxx",
        // Handelt es sich um eine mehrseitige Anwendung, isMulti: false,
        // Ob mobile Endgeräte unterstützt werden sollen isMobile: false,
        // Ob die Element-Komponentenbibliothek verwendet werden soll (https://element.eleme.cn/#/zh-CN/)
        useElement: true,
        // Routing-Modus (Wert ist Hash oder Verlauf, Referenz: https://router.vuejs.org/)
        Routermodus: "Hash",
        // Stammpfad der API-Anforderung apiBaseUrl: '',
        ....
    },
    // Konfiguration der Entwicklungsumgebung dev: {
        apiBaseUrl: "/api",
        Host: lokaleIP,
        Port: 8080,
        autoOpenBrowser: true, // Ob der Browser automatisch geöffnet werden soll writeToDisk: false, // Ob die generierte Datei auf die Festplatte geschrieben werden soll proxyTable: {
            '/api': {
                Ziel: 'http://focm-web.focms.paas.test',
                changeOrigin: true
                }
            }
    },
    // Testumgebungskonfiguration test: {
        // Stammpfad der API-Anforderung apiBaseUrl: '/focm',
        Ausgabestamm: Pfad.Auflösen(__dirname, 'dist/test'),
        veröffentlichen: {
            Remote-Host: "xxxx",
            Remote-Port: '22',
            Remote-Benutzername: „qinglianshizhe“,
            Remote-Passwort: 'xxxxxx',
            remoteAppRoot: `/xxx/xxx/${packageName}`,
            Web-URL: „http://xxxxx.com/“
        }
    },
    // Konfiguration der Produktionsumgebung prod: {
        ...
    }
}

// Holen Sie sich die lokale IP
Funktion getLocalIP () {
    let Schnittstellen = os.networkInterfaces()
    für (let devName in Schnittstellen) {
        let iface = Schnittstellen[Gerätename]
        für (lass i = 0; i < iface.length; i++) {
            lass alias = iface[i];
            wenn(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
                Aliasadresse zurückgeben;
            }
        }
    }
    returniere 'localhost'
}

/**
 * Geschäftsausnahmeklasse */

Klasse BusinessError erweitert Error {
    Konstruktor (Code, Nachricht, Daten) {
        super(Nachricht)
        dieser.code = Code
        this.name = "Geschäftsfehler"
        this.data = Daten
    }
}
/**
 * Systemausnahmeklasse */
Klasse SystemError erweitert Error {
    Konstruktor (Code, Nachricht, Daten) {
        super(Nachricht)
        dieser.code = Code
        this.name = "Systemfehler"
        this.data = Daten
    }
}
// Axios-Konfiguration axios.defaults.timeout = 10000
axios.defaults.headers.post['Inhaltstyp'] = 'Anwendung/json; Zeichensatz=UTF-8'

// POST-Anforderung ausführen Funktion post (Option, vm) {
    option.method = "POST"
    http zurückgeben(Option, VM)
}

// GET-Anforderung ausführen Funktion get (Option, vm) {
    option.method = "GET"
    http zurückgeben(Option, VM)
}

// Download-Anforderungsfunktion download (Option, vm) {
    option.method = option.method || 'GET'
    option.isDownload = true
    option.responseType = "Blob"
    http zurückgeben(Option, VM)
    }

/**
* Backend-Schnittstelle anfordern * @param Option Parameter * URL: Anforderungspfad (wird nach baseUrl eingefügt, beginnend mit „/“)
* Daten: Anforderungsparameterobjekt * Timeout: Anforderungs-Timeout (Standard: 10000, d. h. 10 Sekunden)
* toastError: Automatische Eingabeaufforderung für Geschäftsausnahmeinformationen, der Standardwert ist „true“, keine automatische Eingabeaufforderung, wenn „false“ * @param vm Vue-Objekt (wird für die automatische Eingabeaufforderung für Ausnahmeinformationen bei Auftreten einer Ausnahme verwendet)
* @return {Promise} Promise-Objekt */

Funktion http (Option, vm) {
    returniere neues Promise((lösen, ablehnen) => {
        let-Methode = Option.Methode || 'POST'
        let url = Basis-URL + option.url
        let timeout = option.timeout || 10000
        let headers = option.headers || {}
        let responseType = option.responseType
        let data = {} // Hier können Sie den Standardwert festlegen if (option.data) {
            if (option.data Instanz von FormData) {
                Header ['Inhaltstyp'] = 'multipart/Formulardaten'
                let formData = option.data
                Objekt.Schlüssel(Daten).fürJeden((Schlüssel) => {
                    formData.append(Schlüssel, Daten[Schlüssel])
                })
                Daten = Formulardaten
            } anders {
                Daten = { ...Daten, ...Option.Daten }
            }
        }

        let requestOptions = { Methode, URL, Header, Timeout, Antworttyp }
        wenn (Methode.toUpperCase() === 'GET') {
            requestOptions.params = Daten
        } anders {
            requestOptions.data = Daten
        }
        axios(Anforderungsoptionen).then( (res) => {
            const contentDisposition = res.header['content-disposition']
            // Datei herunterladen, wenn (contentDisposition &&
        (/filename\*=UTF-8''(.*)/.test(contentDisposition) || /filename="(.*)"/.test(contentDisposition))) { // Wenn es ein Dateidownload ist, const utf8Match = contentDisposition.match(/filename\*=UTF-8''(.*)/) // Übereinstimmung mit UTF-8-Dateinamen const normalMatch = contentDisposition.match(/filename="(.*)"/) // Übereinstimmung mit gewöhnlichen englischen Dateinamen const filename = utf8Match ? decodeURIComponent(utf8Match[1]) : normalMatch[1]
                const blob = neuer Blob([res.data])
                const downloadElement = document.createElement('a')
                const href = Fenster.URL.createObjectURL(blob)
                downloadElement.href = href
                downloadElement.download = Dateiname
                Dokument.Body.AnhängenUntergeordnetesElement(DownloadElement)
                downloadElement.click()
                document.body.removeChild(downloadElement)
                Fenster.URL.revokeObjectURL(href)
                Entschlossenheit (res)
            } sonst { // JSON-Informationen getResponseInfo(res).then((resInfo) => {
                    responseInfoHandle(resInfo, lösen, ablehnen, Option, vm, requestOptions)
                })
            }
        }, err => {
            Fehlerhandle(Fehler, Ablehnung, Option, VM)
        }).catch(Funktion (Fehler) {
            Fehlerhandle(Fehler, Ablehnung, Option, VM)
        })
    })

}

// Antwortinformationen verarbeiten Funktion responseInfoHandle (resInfo, resolve, reject, option, vm) {
    // Ist die Anfrage erfolgreich? let isSuccess = resInfo.retCode === '200'
    // Statuscode let code = resInfo.retCode
    // Beschreibungsinformationen let message = resInfo.retMsg || ‚Anforderung fehlgeschlagen!‘ '
    // Daten let resData = resInfo.data || {}
    if (isSuccess) { // Anfrage erfolgreichconsole.log(`[${option.method || 'POST'}]${option.url} Anfrage erfolgreich!\nAnfrageparameter:`, option.data, '\nAntwortergebnis:', resInfo)
        auflösen(resData)
    } else { // Geschäftsausnahme console.error(`[${option.method} || 'POST']${option.url} Anforderung fehlgeschlagen!\nAnforderungsparameter:`, option.data, '\nAntwortergebnis:', resInfo)
        let err = neuer BusinessError(Code, Nachricht, ResData)
        Fehlerhandle(Fehler, Ablehnung, Option, VM)
    }
}

// Antwortinformationen abrufen JSON-Objektfunktion getResponseInfo (res) {
    returniere neues Promise((lösen, ablehnen) => {
        // Zurückgegebene Informationen let resInfo = res.data
        if (resInfo Instanz von Blob) {
            const reader = neuer FileReader()
            reader.readAsText(resInfo, 'utf-8')
            reader.onload = () => {
                resInfo = JSON.parse(reader.result)
                auflösen(resInfo)
            }
        } anders {
        auflösen(resInfo)
        }
    })
}

/* Ausnahmebehandlung */
Funktion Fehlerhandle (Fehler, Ablehnung, Option, VM) {
    let error = null
    wenn (err.name === 'Geschäftsfehler') {
        Fehler = Fehler
    } anders {
        console.error(option.url, 'Anforderung fehlgeschlagen!', err.code, err)
        Fehler = neuer Systemfehler (500, „Leider ist ein Systemfehler aufgetreten. Bitte versuchen Sie es später noch einmal!“)
    }
    console.log('Fehler = ', Fehler)
    wenn (vm) {
        if (error.name === 'BusinessError') { // Geschäftsausnahme // Keine Berechtigung if (error.code === 'xxx') {
                Fehler.ignorieren = true
                wenn (!isShowUnauthorized) {
                    vm.$popupAlert({
                        Titel: 'Tipps',
                        Meldung: ,,Nicht angemeldet oder Sitzung abgelaufen, bitte erneut anmelden! ',
                        Breite: 330,
                        Höhe: 180,
                        btnText: 'Erneut anmelden',
                        beiOK: () => {
                            isShowUnauthorized = false // Ob das Popup-Fenster zur erneuten Anmeldung angezeigt werden soll, ist auf true gesetzt
                            // Zur Anmeldeseite springen. Nach erfolgreicher Anmeldung zum ursprünglichen Pfad springen vm.$router.push({ name: 'login', params: { fromPath: vm.$route.fullPath } })
                            vm.$eventBus.$emit('NO_AUTH_EVENT')
                        }
                    })
                    isShowUnauthorized = true // Ob das Popup-Fenster zur erneuten Anmeldung angezeigt werden soll, ist auf true gesetzt
                }
                Fehler.ignorieren = true
            } sonst wenn (option.toastError !== false) {
                vm.$toast({ Typ: 'Fehler', Nachricht: Fehlernachricht })
            }
        } else { // Systemstörung vm.$toast('Netzwerkstörung!')
        }
    }
    ablehnen(Fehler)
}

Standard exportieren {
    Basis-URL,
    http,
    Post,
    erhalten,
    herunterladen
}

Vue von „vue“ importieren
API aus „@/assets/js/api.js“ importieren

Standard exportieren {
    installieren () {
        Vue.prototype.$api = api
    }
}

importiere ApiPlugin aus './plugins/apiPlugin.js'

//Backend-Schnittstellen-Plugin Vue.use(ApiPlugin)

dies.$api.download({
    URL: „/xxx/xxx/xxx“,
    Daten:Parameter
}, Das)

dies.$api.get({
    URL: `/xxx/xxx/xx`,
    Daten:Parameter
}, dies).dann((res) => {
    Konsole.log(res)
})

dies.$api.post({
    URL: "/API/BasicList/Query",
    Daten:Parameter
}, dies).dann(res => {
})