Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe

// http.ts
importiere axios, { AxiosRequestConfig, AxiosResponse } von 'axios'
importiere { ElMessage } von "element-plus"

const showStatus = (Status: Nummer) => {
  let Nachricht = ''
  Schalter (Status) {
    Fall 400:
      Nachricht = 'Anforderungsfehler (400)'
      brechen
    Fall 401:
      Nachricht = 'Nicht autorisiert, bitte melden Sie sich erneut an (401)'
      brechen
    Fall 403:
      Nachricht = 'Zugriff verweigert (403)'
      brechen
    Fall 404:
      Nachricht = 'Anforderungsfehler (404)'
      brechen
    Fall 408:
      Nachricht = 'Zeitüberschreitung der Anforderung (408)'
      brechen
    Fall 500:
      Nachricht = 'Serverfehler (500)'
      brechen
    Fall 501:
      Nachricht = 'Dienst nicht implementiert (501)'
      brechen
    Fall 502:
      Meldung = 'Netzwerkfehler (502)'
      brechen
    Fall 503:
      Nachricht = ‚Dienst nicht verfügbar (503)‘
      brechen
    Fall 504:
      Nachricht = 'Netzwerk-Timeout (504)'
      brechen
    Fall 505:
      Nachricht = „HTTP-Version wird nicht unterstützt (505)“
      brechen
    Standard:
      Nachricht = `Verbindungsfehler (${status})!`
  }
  return `${message}, bitte überprüfen Sie das Netzwerk oder kontaktieren Sie den Administrator! `
}

const service = axios.create({
  // Gemeinsames Debuggen // baseURL: process.env.NODE_ENV === 'Produktion' ? `/` : '/api',
  Basis-URL: "/api",
  Überschriften: {
    erhalten: {
      „Inhaltstyp“: „Anwendung/x-www-form-urlencoded; Zeichensatz=utf-8“
    },
    Post: {
      „Inhaltstyp“: „Anwendung/json;Zeichensatz=utf-8“
    }
  },
  // Ob eine standortübergreifende Zugriffskontrolle mit Credentials angefordert werden soll: true,
  Zeitüberschreitung: 30000,
  transformRequest: [(Daten) => {
    Daten = JSON.stringify(Daten)
    Rückgabedaten
  }],
  validiereStatus() {
    // Bei Verwendung von async-await ist die Handhabung von Ablehnungssituationen umständlich, daher wird bei allen Rückgaben und Ausnahmebehandlungen im Geschäftscode „true“ zurückgegeben.
  },
  transformResponse: [(Daten) => {
    wenn (Datentyp === 'Zeichenfolge' und Daten.startetMit('{')) {
      Daten = JSON.parse(Daten)
    }
    Rückgabedaten
  }]
  
})

// Interceptor anfordern service.interceptors.request.use((config: AxiosRequestConfig) => {
  //Holen Sie sich das Token und fügen Sie es dem Anforderungsheader hinzu let token = localStorage.getItem('token')
  wenn(Token){
    config.headers.Authorization = `${token}`;
  }
  Konfiguration zurückgeben
}, (Fehler) => {
  // Im Geschäftscode wurde ein Fehler ausgegeben error.data = {}
  error.data.msg = ,,Serverstörung, bitte kontaktieren Sie den Administrator! '
  returniere Promise.resolve(Fehler)
})

// Antwort-Interceptor service.interceptors.response.use((response: AxiosResponse) => {
  const status = antwort.status
  lass msg = ''
  wenn (Status < 200 || Status >= 300) {
    // HTTP-Fehler behandeln und an den Geschäftscode weiterleiten msg = showStatus(status)
    wenn (Typ der Antwort.Daten === 'Zeichenfolge') {
      Antwort.Daten = { msg }
    } anders {
      Antwort.Daten.msg = Nachricht
    }
  }
  Antwort zurückgeben
}, (Fehler) => {
  wenn (axios.isCancel(Fehler)) {
    console.log('wiederholte Anfrage: ' + Fehlernachricht)
  } anders {
    // Fehlercode verarbeiten
    // Im Geschäftscode wurde ein Fehler ausgegeben error.data = {}
    error.data.msg = ,,Anforderungstimeout oder Serverausnahme, bitte überprüfen Sie das Netzwerk oder kontaktieren Sie den Administrator! '
    ElMessage.error(Fehler.Daten.Nachricht)
  }
  returniere Promise.reject(Fehler)
})

Standarddienst exportieren

// http.ts
importiere axios, { AxiosRequestConfig, AxiosResponse } von 'axios'
importiere qs von "qs"
importiere { ElMessage } von "element-plus"

//Deklariere eine Map, um die Kennung und die Abbruchfunktion jeder Anfrage zu speichern const pending = new Map()
/**
 * Anfrage hinzufügen * @param {Object} config 
 */
const addPending = (Konfiguration: AxiosRequestConfig) => {
  Konstanten-URL = [
    Konfigurationsmethode,
    konfiguration.url,
    qs.stringify(Konfigurationsparameter),
    qs.stringify(Konfigurationsdaten)
  ].verbinden('&')
  config.cancelToken = config.cancelToken || neues axios.CancelToken(abbrechen => {
    if (!pending.has(url)) { // Wenn die aktuelle Anfrage nicht im Pending-Modus existiert, füge sie hinzu pending.set(url, cancel)
    }
  })
}
/**
 * Anfrage entfernen * @param {Object} config 
 */
const removePending = (Konfiguration: AxiosRequestConfig) => {
  Konstanten-URL = [
    Konfigurationsmethode,
    konfiguration.url,
    qs.stringify(Konfigurationsparameter),
    qs.stringify(Konfigurationsdaten)
  ].verbinden('&')
  if (pending.has(url)) { // Wenn die aktuelle Anforderungskennung im ausstehenden Zustand vorhanden ist, müssen Sie die aktuelle Anforderung abbrechen und const cancel = pending.get(url) entfernen.
    Abbrechen (URL)
    ausstehend.Löschen(URL)
  }
}

/**
 * Ausstehende Anfragen löschen (wird beim Routing von Umleitungen aufgerufen)
 */
exportiere const clearPending = () => {
  für (const [URL, Abbrechen] von ausstehend) {
    Abbrechen (URL)
  }
  ausstehend.löschen()
}

// Interceptor anfordern service.interceptors.request.use((config: AxiosRequestConfig) => {
  removePending(config) // Bevor die Anfrage startet, die vorherige Anfrage prüfen und abbrechen addPending(config) // Aktuelle Anfrage zum Pending hinzufügen let token = localStorage.getItem('token')
  wenn(Token){
    config.headers.Authorization = `${token}`;
  }
  Konfiguration zurückgeben
}, (Fehler) => {
  // Im Geschäftscode wurde ein Fehler ausgegeben error.data = {}
  error.data.msg = ,,Serverstörung, bitte kontaktieren Sie den Administrator! '
  returniere Promise.resolve(Fehler)
})

// Antwort-Interceptor service.interceptors.response.use((response: AxiosResponse) => {

  removePending(response) // Nachdem die Anfrage abgeschlossen ist, entfernen Sie diese Anfrage const status = response.status
  lass msg = ''
  wenn (Status < 200 || Status >= 300) {
    // HTTP-Fehler behandeln und an den Geschäftscode weiterleiten msg = showStatus(status)
    wenn (Typ der Antwort.Daten === 'Zeichenfolge') {
      Antwort.Daten = { msg }
    } anders {
      Antwort.Daten.msg = Nachricht
    }
  }

  Antwort zurückgeben
}, (Fehler) => {
  wenn (axios.isCancel(error)) {
    console.log('wiederholte Anfrage: ' + Fehlernachricht)
  } anders {
    // Fehlercode verarbeiten
    // Im Geschäftscode wurde ein Fehler ausgegeben error.data = {}
    error.data.msg = ,,Anforderungstimeout oder Serverausnahme, bitte überprüfen Sie das Netzwerk oder kontaktieren Sie den Administrator! '
    ElMessage.error(Fehler.Daten.Nachricht)
  }
  returniere Promise.reject(Fehler)
})

Standarddienst exportieren

importiere { createRouter, createWebHistory, RouteRecordRaw } von 'vue-router'
Login aus '@/views/Login/Login.vue' importieren
//Führen Sie die in axios verfügbare Funktion „clearPending“ ein. import { clearPending } from "@/api/axios"

....
....
....

const router = createRouter({
  Verlauf: createWebHistory(process.env.BASE_URL),
  Routen
})

router.beforeEach((bis, von, weiter) => {
  // Vor der Umleitung alle Anfragen löschen clearPending()
  // ...
  nächste()
})

Standardrouter exportieren

//Schnittstellenantwortformat Exportschnittstelle HttpResponse {
  Status: Nummer
  StatusText: Zeichenfolge
  Daten: {
    Kennziffer
    desc: Zeichenfolge
    [Schlüssel: Zeichenfolge]: beliebig
  }
}

Axios aus „./axios“ importieren
importiere { HttpResponse } von '@/@types'
/**
 * @interface loginParams - Anmeldeparameter * @property {string} username - Benutzername * @property {string} password - Benutzerpasswort */
Schnittstelle LoginParams {
  Benutzername: Zeichenfolge
  Passwort: Zeichenfolge
}
//Kapselung der Schnittstellenmethode des Benutzertyps export class UserService {
  /**
   * @description Benutzerinformationen abfragen* @param {number} teamId - die abzufragende Team-ID
   * @return {HttpResponse} Ergebnis
   */
  statische asynchrone Anmeldung (Parameter: LoginParams): Promise<HttpResponse> {
    return Axios('/api/Benutzer', {
      Methode: 'get',
      Antworttyp: "json",
      Parameter: {
        ...Parameter
      },
    })
  }

  statische asynchrone Registrierung (Parameter: LoginParams): Promise<HttpResponse> {
    return Axios('/api/user/registrier', {
      Methode: 'get',
      Antworttyp: "json",
      Parameter: {
        ...Parameter
      },
    })
  }
}

<Vorlage>
     <input type="text" v-model="Konto" placeholder="Bitte geben Sie Ihre Kontonummer ein" name="Benutzername" >
     <input type="text" v-model="Passwort" placeholder="Bitte geben Sie Ihr Passwort ein" name="Benutzername" >
     <button @click.prevent="handleRegister()">Anmelden</button>
</Vorlage>
<script lang="ts">
importiere { defineComponent, reaktiv, toRefs } von 'vue'
//Schnittstelle importieren import { UserService } von '@/api/user'

exportiere StandarddefiniereKomponente({
  aufstellen() {
    const state = reaktiv({
      Konto: 'admin', //Konto-Passwort: 'hhhh', //Passwort})

    const handleLogin = async () => {
      const loginParams = {
        Benutzername: state.Account,
        Passwort: state.Password,
      }
      const res = warte auf UserService.login(loginParams)
       Konsole.log(res)
    }

    const handleRegister = async () => {
      const loginParams = {
        Benutzername: state.Account,
        Passwort: state.Password,
      }
      const res = warte auf UserService.resgister(loginParams)
      Konsole.log(res)
    }
    zurückkehren {
      …toRefs(Zustand),
      handleLogin,
      handleRegistrieren 
    }
  },
})
</Skript>