Detailliertes Beispiel für die Verwendung von Typescript zum Einkapseln von Axios in Vue3

importiere axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse } von 'axios'
importiere { IResponseData } aus '@/types'
importiere { ElMessage, ElLoading, ILoadingInstance } von 'element-plus'

Typ TAxiosOption = {
  Basis-URL: Zeichenfolge;
  Zeitüberschreitung: Zahl;
}

const konfiguration = {
  Basis-URL: '/',
  Zeitüberschreitung: 120000
}

lass laden: ILoadingInstance;

Klasse Http {
  //Dienst: AxiosInstance;
  Service;
  Konstruktor(Konfiguration: TAxiosOption) {
    dieser.Dienst = axios.create(Konfiguration)

    /* Anforderungsabfangen this.service.interceptors.request.use(config => config, error => Promise.reject(error))*/
    this.service.interceptors.request.use((Konfiguration: AxiosRequestConfig) => {
      /* Geschäftslogik 1. Ladeanimation im Vollbildmodus aktivieren 2. Datenverschlüsselung config.data
      3. Fügen Sie dem Anforderungsheader ein Token hinzu, kombiniert mit vuex oder localstorage:
          wenn (store.getters.token) config.headers['x-token'] = store.getters.token
          sonst Weiterleitung 4. …
      */
      wird geladen = ElLoading.service({
        Sperre: wahr,
        Text: 'Wird geladen',
        Spinner: „el-icon-loading“,
        Hintergrund: 'rgba(255, 255, 255, 0.7)',
      })

      wenn (localStorage.getItem('token')) {
        (config.headers als AxiosRequestHeaders).authorization = localStorage.getItem('token') als Zeichenfolge
      }

      Konfiguration zurückgeben
    }, Fehler => {
      /* Anforderungsfehler 1. Vollbild-Ladeanimation schließen 2. Zur Fehlerseite weiterleiten */
      wird geladen.schließen()
      return Promise.reject(error) // Um ​​die Fehlermeldung im Code abzufangen})


    /* Antwortabfangen this.service.interceptors.response.use(response => response.data, error => Promise.reject(error))*/
    this.service.interceptors.response.use((Antwort: AxiosResponse<beliebig>) => {
      /* 
      1. Schließen Sie die Ladeanimation im Vollbildmodus. 2. Entschlüsseln Sie die Daten. 3. Führen Sie unterschiedliche Fehlerbehandlungen basierend auf response.data.code durch. 4. …
      */
      wird geladen.schließen()

      const data = antwort.data
      const { code } = Daten

      wenn (Code !== '000000') {
        ElMessage.error(Daten.Nachricht)
        returniere Promise.reject(Daten)
      }
      Antwortdaten zurückgeben
    }, Fehler => {
      wird geladen.schließen()
      ElMessage.error('Anforderung fehlgeschlagen',)
      returniere Promise.reject(Fehler)
    })
  }
  get<T>(url: string, params?: object, _object = {}): Promise<IResponseData<T>> {
    gibt this.service.get(url, { params, ..._object }) zurück
  }
  post<T>(url: string, params?: object, _object = {}): Promise<IResponseData<T>> {
    gib diesen.Dienst.Post zurück (URL, Parameter, _Objekt)
  }
  setze<T>(url: string, params?: object, _object = {}): Promise<IResponseData<T>> {
    gib this.service.put(URL, Parameter, _Objekt) zurück
  }
  löschen<T>(URL: Zeichenfolge, Parameter?: beliebig, _Objekt = {}): Promise<IResponseData<T>> {
    gib dies zurück.Dienst.Löschen(URL, {Parameter, ..._Objekt})
  }
}

exportiere standardmäßig neues Http(config)

Schnittstelle IResponseData<T> exportieren {
  Status: Nummer;
  Nachricht?:Zeichenfolge;
  Daten:T;
  Code: Zeichenfolge;
}

<template lang="pug">
//- Anfrageformular
el-form(:inline="true" :model="queryForm" Größe="klein" label-position="links")
  el-form-item
    el-button(Typ="primär" @click="bedienen")
      | el-form-item(label="Produktnummer") hinzufügen
    el-input(v-model="queryForm._id")
  el-form-item(label="Produktname")
    el-input(v-model="queryForm.goodName")
  el-form-item(label="Menge")
    el-input(v-model="queryForm.count")
  el-form-item(label="Details")
    el-input(v-model="queryForm.des")
  el-form-item
    el-button(Typ="primär" @click="Abfrage")
      | Abfrage //- Liste el-table(:data="list" center size="mini")
  el-table-column(prop="goodName" label="Produktname")
  el-table-column(prop="Anzahl" label="Menge")
  el-table-column(prop="des" label="Details")
  el-table-column(Bezeichnung="Vorgang")
    Vorlage(#default="Requisiten")
      el-button(Typ="primär" Größe="klein" @click="operieren(props.row)")
        | El-Button bearbeiten (Typ = "Gefahr" Größe = "klein" @click = "Operate(props.row, true)")
        | Löschen //- Hinzufügen, bearbeiten el-drawer(v-model="detailShow" :title="editShow === true ? 'Bearbeiten' : 'Hinzufügen'" direction="rtl")
  el-form(:Modell="detailForm" Größe="klein" Beschriftungsbreite="80px" Beschriftungsposition="links")
    //- el-form-item(label="Produktnummer" erforderlich v-if="false")
    el-form-item(label="Produktnummer" erforderlich v-if="log(editShow)")
      el-input(v-model="detailForm._id" schreibgeschützt)
    el-form-item(label="Produktname" erforderlich) 
      el-input(v-model="detailForm.goodName")
    el-form-item(label="Menge")
      el-input(v-model="detailForm.count")
    el-form-item(label="Details")
      el-input(v-model="detailForm.des")
    el-form-item
      el-button(Typ="primär" Größe="klein" @click="senden")
        | OK</template>

<script lang="ts">
importiere { defineComponent, reaktiv, ref } von „vue“;
importiere { ElMessage } von 'element-plus'
importiere { IGoodInfo, IList } aus '@/types/goods'
importiere http von '@/http'

exportiere StandarddefiniereKomponente({
  Name: "Home",
  aufstellen() {
    const list = ref<IGoodInfo[]>([])

    const queryForm = ref({ goodName: '', count: '', _id: '', des: '' })
    const detailForm = ref({ goodName: '', count: '', _id: '', des: '' })
    const detailShow = ref(false)
    const editShow = ref(false)

    Abfrage()


   	asynchrone Funktion query() {
      const { data } = warte auf http.get<IList>('/goods/list', queryForm.value)
      Liste.Wert = Daten.Liste
    }

    asynchrone Funktion operabel (Form?: IGoodInfo, Flag?: true) {
      wenn (!form) {
        detailShow.value = true
        editShow.value = false
        detailForm.value = { goodName: '', Anzahl: '', _id: '', des: '' }
      } sonst wenn (!flag) {
        detailShow.value = true
        editShow.value = true
        detailForm.value = { ...Formular }
      } anders {
        warte auf http.delete('/goods/delete', { _id: form._id })
        Abfrage()
      }
    }

    asynchrone Funktion submit() {
      wenn (detailForm.value._id) {
        warte auf http.put('/goods/edit', detailForm.value)
      }anders{
        warte auf http.put('/goods/edit', detailForm.value)
      }

      detailShow.value = false
      ElMessage({
        Meldung: „Vorgang erfolgreich“,
        Typ: "Erfolg",
      })
      Abfrage()
    }


    Funktion log(params:any) {
     konsole.log(Parameter);
     Rückgabeparameter
    }

    zurückkehren {
      Detailanzeige,
      bearbeitenAnzeigen,
      Liste,
      Abfrageformular,
      detailFormular,
      Abfrage,
      arbeiten,
      einreichen,
      Protokoll
    }
  }
});
</Skript>

Schnittstelle IGoodInfo exportieren {
  _id: Zeichenfolge;
  guterName: Zeichenfolge;
  Anzahl: Zeichenfolge;
  des: Zeichenfolge
}

Exportschnittstelle IList {
  Liste: IGoodInfo[]
}