Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios

importiere Axios, {
    AxiosInstance,
    AxiosResponse,
    AxiosRequestConfig,
    AxiosError
} von 'axios'
exportiere standardmäßige abstrakte Klasse HttpClient {
    geschützte schreibgeschützte Instanz: AxiosInstance

    öffentlicher Konstruktor(baseURL = '/api', timeout = 1000 * 120) {
        diese.Instanz = axios.create({
            Basis-URL,
            Time-out
        })
        // 1. Interceptor anfordern this._initializeRequestInterceptor()
        // 2. Antwort-Interceptor this._initializeResponseInterceptor()
    }
    private _initializeRequestInterceptor = () => {
        diese.Instanz.Interceptors.Anfrage.Verwenden(
            diese._handleRequest,
            this._handleError
        )
    }
    private _handleRequest = (Konfiguration: AxiosRequestConfig) => {}
   
    private _initializeResponseInterceptor = () => {
        diese.Instanz.Interceptors.Response.Verwendung(
            diese._handleResponse,
            this._handleError
        )
    }
    private _handleResponse = (Antwort: AxiosResponse) => {}
    geschützt _handleError = (Fehler: AxiosError) => Promise.reject(Fehler)
}

     private _handleRequest = (Konfiguration: AxiosRequestConfig) => {
        //1. Fügen Sie einen benutzerdefinierten Anforderungsheader hinzu: config.headers['Authorization'] = 'my token'
        config.headers['mobile'] = 'mein Handy'
        // 2. Bestimmen Sie, ob Sie sich anmelden möchten (bestimmen Sie, ob ein Token vorhanden ist)
        
        //3. Datenformat konvertieren config.data = qs.stringify(config.data)
        Konfiguration zurückgeben
    }

 // Antwort-Interceptor private _handleResponse = (Antwort: AxiosResponse) => {
        const { Daten, Header } = Antwort

        //1.--Verarbeiten Sie das Antworttoken und speichern Sie das Token
        const token = headers['autorisierung']
        wenn (Token) {
            dies._saveToken(Token)
        }
       
        //2. --Verarbeite den Antwortcode. Hier versuche es mit einem Catch. Wenn einige Backend-Schnittstellen keinen Code zurückgeben, kehre direkt zu try { zurück.
            const code = daten.code,
            Nachricht = data.desc || data.msg
            const isSucceed = this._handleResCode(Code, Nachricht, URL)
            wenn (ist erfolgreich) {
                returniere Promise.resolve(Daten)
            } anders {
                returniere Promise.reject(Nachricht)
            }
        } Fehler abfangen {
            returniere Promise.resolve(Daten)
        }
       
    }
    //Token speichern
    private _saveToken(Token: Zeichenfolge) {
        const USER = getModule(BenutzerModul)
        USER.setToken(Token)
    }
    private _handleResCode(Code: Nummer, Nachricht: Zeichenfolge, URL: Zeichenfolge) {
        wenn (Code === 0) {
            //Anfrage erfolgreich return true
        } sonst wenn (Code===4000) {
            // Token läuft ab, springe zurück zur Anmeldeoberfläche Vue.prototype.$message.error('Identitätsinformationen abgelaufen, bitte melden Sie sich erneut an')
            router.push({ Name: 'login' })
            return false
        } anders {
            // In anderen Fällen sind alle Eingabeaufforderungen Nachrichteninformationen Vue.prototype.$message.error(message)
            return false
        }
    }

httpClient.ts
Benutzer.ts
uti.ts

importiere HttpClient aus './HttpClient'
importiere { AlarmItemType } aus '../types/test'
importiere { BaseResType } von '../types/index'

Klasse UtilApi erweitert HttpClient {
   //Beispielsweise wird die vom Hintergrund zurückgegebene Antwort res={code:xxx,data:xxx,token:xxx,desc:xxx}
    //Zuerst müssen Sie den Typ von res.data definieren, der der erste Parameter von get ist, AlarmItemType
    //Dann müssen Sie den Typ der gesamten Antwort definieren, nämlich BaseResType<AlarmItemType>
    public getAlarmById = (id: Zeichenfolge) =>
        this.instance.get<AlarmItemType, BaseResType<AlarmItemType>>(
            `/realtime/alarms/queryByAlarmId/${id}`
        )
}

exportiere const UTIL_API = neue UtilApi()

<Vorlage>
    <section>Anforderungsdaten:{{ alarmData }}</section>
</Vorlage>

<script lang="ts">
importiere { UTIL_API } von '@/api/utilApi'
importiere { Vue, Komponente } von 'vue-property-decorator'
@Komponente({
    Komponenten: {}
})
exportiere Standardklasse TestRequest erweitert Vue {
    alarmData = {}
    async getAlarmData() {
        const res = warte auf UTIL_API.getAlarmById('alarmIdc7e9bd47')
        wenn (res.code == 0) {
            this.$message.success('Anfrage erfolgreich')
            diese.alarmData = res.data
        }
    }
    montiert() {
        dies.getAlarmData()
    }
}
</Skript>
<style lang="scss" scoped></style>