So verwenden Sie Axios-Anfragen im Vue-Projekt

dies.$axios.post("/user/add", {
    Parameter: {
        Name: dieser.Name,
        Alter: dieses.Alter
    }
})
.then(res => {
    Konsole.log(res)
})
.then(err => {
    Konsole.log(res)
})

// Wechseln Sie zwischen verschiedenen Basis-URLs gemäß process.env.NODE_ENV
const isPro = process.env.NODE_ENV === 'Produktion'
​
modul.exporte = {
    // 'apis': Proxy-Basis-URL, die vom Proxy in vue.config.js festgelegt wurde: isPro ? 'http://192.168.100.120/ceds' : '/apis'
}

Axios von „Axios“ importieren
Qs aus „qs“ importieren
Vue von „vue“ importieren
import { getToken } from '@Utils/session.utils' // Token-Datei speichern und abrufen Importadresse von './address' // Adresse anfordern
Klasse Anfrage {
    Konstruktor () {
        // Eine Axios-Instanz erstellen this._axios = axios.create({
            baseURL: Adresse.baseURL,
            Timeout: 1000 * 5, // Anforderungs-Timeout-Header: {}
        })
        //Abfangen anfordern this._axios.interceptors.request.use(
            Konfiguration => {
                const requestHeader = {
                    'X-Angefordert-Mit': 'XMLHttpRequest',
                    'Inhaltstyp': 'application/json; Zeichensatz=UTF-8',
                    'Zugriffskontrolle-Origin zulassen': '*',
                    token: getToken() // Token zum Anfrageheader hinzufügen
                }
                config.headers = Objekt.assign(config.headers, requestHeader)
                Konfiguration zurückgeben
            },
            Fehler => {
                Promise.reject(Fehler)
            }
        )
    }
     
    // Bestimmen Sie anhand der Anforderungsmethode, ob die Parameter in der Abfrage oder im Textkörper platziert werden sollen.
    // Der intuitivste Unterschied besteht beispielsweise darin, dass GET-Anfragen Parameter in der URL enthalten, während POST Parameter über den Anforderungstext in den Text einfügt, sodass die Parameterformate beim Senden unterschiedlich sind // Im Folgenden sind die vier Parameterformate aufgeführt, die ich im Allgemeinen für Anforderungsmethoden verwende. Sie können sie selbst anpassen /**
      * Senden Sie eine Get-Anfrage * @param {String} URL-Adresse * @param {Object} Abfrageabfrageparameter * @return JSON-Daten */
    erhalte (URL, Abfrage = {}) {
        gib dies zurück._request('get')(url, {
            ...Abfrage
        })
    }
    /**
      * Sendeanfrage * @param {String} URL-Adresse * @param {Object} Body-Abfrageparameter * @return JSON-Daten */
    post(url, body = {}, headers) {
        Daten lassen;
        wenn (dies.isFormData(body)) {
            Daten = Text
        } sonst wenn(Array.isArray(body)) {
            Daten = Text
        } anders {
            Daten = { ...Textkörper }
        }
        gib dies zurück._request('post')(URL, Header)(URL, Daten);
    }
    setze (URL, Text = {}) {
        gib dies zurück._request('put')(url, {
            ...Körper
        });
    }
    löschen(URL, Text = {}) {
        gib dies zurück._request('löschen')(url, {
            ...Körper
        });
    }
​
    isFormData = v => {
        returniere Object.prototype.toString.call(v) === '[Objekt FormData]'
    }
​
​
    /**
      * Anforderungsheader festlegen * @param {Object} Header Anforderungsheader */
    setHeaders(header) {
        Objekt.Schlüssel(Header).fürJeden(Schlüssel => {
            this._axios.defaults.headers[Schlüssel] = Header[Schlüssel]
        })
    }
​
    // Anfrageheader verarbeiten
    handleHeaders() {
        const headers = {}
        Header['XMIME-TYPE'] = '3'
        Header['Inhaltstyp'] = 'Anwendung/json; Zeichensatz=UTF-8'
        Rückgabeheader
    }
​
    /**
      * Anfrage senden * @param {String} Methode Anfragemethodentyp * @param Header
      * @returns {Funktion(*=, *=):Promise<unbekannt>}
      * @Privat
      */
    _request (Methode, Header) {
        this.setHeaders(this.handleHeaders()) // Einen einheitlichen Anforderungsheader festlegen if (headers) {
            this.setHeaders(headers) //Benutzerdefinierte Anforderungsheader}
         
        return (URL, Daten, Timeout) => {
            const konfiguration = {
                URL (URL = URL = URL),
                Verfahren,
                Zeitüberschreitung: Zeitüberschreitung || this._axios.defaults.timeout
            } //Anforderungskonfiguration erstellen
​
            // Bestimmen Sie den Anfragetyp get post
            const paramType = ['get', 'delete'].indexOf(Methode) !== -1 ? 'Params' : 'Daten'
            config[paramType] = Daten
            //Parameterserialisierung config.paramsSerializer = params => {
                Geben Sie Qs.stringify(params, { arrayFormat: 'wiederholen' }) ein.
            }
             
            returniere neues Promise((lösen, ablehnen) => {
                // Senden Sie die eigentliche Anfrage, überprüfen Sie die Berechtigungen, prüfen Sie 404 und andere Status
                dies._axios
                    .request(Konfiguration)
                    .dann(Antwort => {
                        wenn (dieser.handleSuccessStatus(response.data.code, response.data)) {
                            wenn (Antwort.header['Inhaltstyp'] !== 'Text/Plain; Zeichensatz=urf-8') {
                            lösen(
                                    // Sekundärverpackung des Antwortergebnisses Object.assign(
                                      {
                                          Erfolg: Zahl(Antwort.Daten.Code) === 200,
                                            Daten: Antwort.Daten.Daten,
                                            Nachricht: Antwort.Daten.Nachricht
                                        },
                                       Antwortdaten
                                    )
                                ) // Verarbeite das zurückgegebene Ergebnis } else {
                                auflösen(Antwort.Daten)
                            }
                        }
                    }, Antwort => {
                        // Fehlercode verarbeiten if(response.response) {
                            const statusCode = antwort.response.status
                            this.handleErrorStatus(statusCode)
                        } anders {
                          Vue.prototype.$message.error(Antwort.Nachricht)
                        }
                        ablehnen(Antwort)
                    })
                    .catch(err => {
                        ablehnen (Fehler)
                    })
                })
            }
        }
    }
​
    // Die Anforderung ist erfolgreich und der Fehlercode wird zurückgegeben // Der spezifische Statuscode stimmt mit dem Back-End-Entwickler überein, und dann wird die entsprechende Eingabeaufforderung entsprechend dem Statuscode angezeigt // Das Folgende ist meine Operation im Projekt. Sie können sie selbst anpassen und erweitern handleSuccessStatus (Code, Daten) {
        let result = ''
        let flag = false
        Schalter (Code) {
            Fall '20007':
                Ergebnis = ‚Das sekundäre Authentifizierungskennwort wurde nicht gefunden!‘ '
                Flagge = wahr
                brechen
            Fall '20008':
                Ergebnis = ,,Ihr sekundäres Authentifizierungskennwort wurde nicht geändert, bitte ändern Sie es zuerst! '
                Flagge = wahr
                brechen
            Fall '20009':
                Ergebnis = ,,Sie haben die sekundäre Authentifizierung noch nicht aktiviert, bitte kontaktieren Sie den Administrator! '
                Flagge = wahr
                brechen
            Fall '90001':
                Ergebnis = 'Bitte geben Sie das sekundäre Authentifizierungskennwort ein! '
                Flagge = wahr
                brechen
            Fall '90002':
                Ergebnis = 'Keine Betriebserlaubnis! '
                Flagge = wahr
                brechen
            Standard:
                brechen
        }
​
        // Benachrichtigen // Die Methode $message ist die Eingabeaufforderungskomponente in element-ui, die ich auf Anfrage eingeführt habe. Sie können sie durch Ihre eigene Eingabeaufforderungskomponente ersetzen, wenn (Ergebnis) {
            Vue.prototype.$message.error(Ergebnis)
        }
        Flagge zurückgeben
    }
    //Erhalte die Fehlermeldung basierend auf dem Fehlercode handleErrorStatus (statusCode) {
        let errorMsg = ''
        wenn (Statuscode === 500) {
            errorMsg = 'Datenanforderung fehlgeschlagen, bitte kontaktieren Sie den Administrator! '
        } sonst wenn (Statuscode === 404) {
            errorMsg = ,,Fehler bei der Anforderungsadresse! '
        } sonst wenn (Statuscode === 402) {
            errorMsg = 'Sie haben derzeit keine Berechtigung diese Daten zu verarbeiten! '
        } anders {
            errorMsg = ,,Anforderungsfehler! '
        }
        // Benachrichtigen Sie Vue.prototype.$message.error(errorMsg)
    }
}
​
Exportieren Sie standardmäßig eine neue Anfrage ()

importiere http von '../services/request'
​
/**
 * @description Benutzerliste abrufen* @param {*} params Parameter der Anforderungsschnittstelle*/
// Die hier definierte Methode reqUserList ruft die Methode get in unserer gekapselten Anfrage auf. Der erste Parameter der Methode get ist die Anfrageadresse, der zweite Parameter der Abfrageparameter export const reqUserList = params => http.get('/user/list', params)

importiere { reqUserList } von '@Apis/user.api' // API importieren
​
Standard exportieren {
    Name: 'Benutzerliste',
    ... ...
    erstellt() {
     
    },
    Methoden: {
        async getUsers() {
            //Rufen Sie die API-Schnittstelle auf und übergeben Sie die Parameter const res = await reqUserList({
                Seite: 1,
                Größe: 10
            })
            console.log(res) // Das Antwortergebnis abrufen}
    }
}