Detailed explanation of interface request management based on Typescript and Axios

import axios, {
    AxiosInstance,
    AxiosResponse,
    AxiosRequestConfig,
    AxiosError
} from 'axios'
export default abstract class HttpClient {
    protected readonly instance: AxiosInstance

    public constructor(baseURL = '/api', timeout = 1000 * 120) {
        this.instance = axios.create({
            baseURL,
            timeout
        })
        // 1. Request interceptor this._initializeRequestInterceptor()
        // 2. Response interceptor this._initializeResponseInterceptor()
    }
    private _initializeRequestInterceptor = () => {
        this.instance.interceptors.request.use(
            this._handleRequest,
            this._handleError
        )
    }
    private _handleRequest = (config: AxiosRequestConfig) => {}
   
    private _initializeResponseInterceptor = () => {
        this.instance.interceptors.response.use(
            this._handleResponse,
            this._handleError
        )
    }
    private _handleResponse = (response: AxiosResponse) => {}
    protected _handleError = (error: AxiosError) => Promise.reject(error)
}

     private _handleRequest = (config: AxiosRequestConfig) => {
        //1. Add a custom request header config.headers['Authorization'] = 'my token'
        config.headers['mobile'] = 'my mobile'
        //2. Determine whether to log in (determine whether there is a token)
        
        //3. Convert data format config.data = qs.stringify(config.data)
        return config
    }

 // Response interceptor private _handleResponse = (response: AxiosResponse) => {
        const { data, headers } = response

        //1.--Process the response token and save the token
        const token = headers['authorization']
        if (token) {
            this._saveToken(token)
        }
       
        //2. --Process the response code, try-catch here, if some backend interfaces do not return code, return directly to try {
            const code = data.code,
            message = data.desc || data.msg
            const isSucceed = this._handleResCode(code, message, url)
            if (isSucceed) {
                return Promise.resolve(data)
            } else {
                return Promise.reject(message)
            }
        } catch (error) {
            return Promise.resolve(data)
        }
       
    }
    //Save token
    private _saveToken(token: string) {
        const USER = getModule(UserModule)
        USER.setToken(token)
    }
    private _handleResCode(code: number, message: string, url: string) {
        if (code === 0) {
            // Request successful return true
        } else if (code===4000) {
            // Token expires, jump back to the login interface Vue.prototype.$message.error('Identity information expired, please log in again')
            router.push({ name: 'login' })
            return false
        } else {
            // In other cases, all prompts are message information Vue.prototype.$message.error(message)
            return false
        }
    }

httpClient.ts
user.ts
uti.ts

import HttpClient from './HttpClient'
import { AlarmItemType } from '../types/test'
import { BaseResType } from '../types/index'

class UtilApi extends HttpClient {
   //For example, the response returned by the background res={code:xxx,data:xxx,token:xxx,desc:xxx}
    //First, you need to define the type of res.data, which is the first parameter of get, AlarmItemType
    //Then you need to define the type of the entire response, which is BaseResType<AlarmItemType>
    public getAlarmById = (id: string) =>
        this.instance.get<AlarmItemType, BaseResType<AlarmItemType>>(
            `/realtime/alarms/queryByAlarmId/${id}`
        )
}

export const UTIL_API = new UtilApi()

<template>
    <section>Request data:{{ alarmData }}</section>
</template>

<script lang="ts">
import { UTIL_API } from '@/api/utilApi'
import { Vue, Component } from 'vue-property-decorator'
@Component({
    components: {}
})
export default class TestRequest extends Vue {
    alarmData = {}
    async getAlarmData() {
        const res = await UTIL_API.getAlarmById('alarmIdc7e9bd47')
        if (res.code == 0) {
            this.$message.success('Request successful')
            this.alarmData = res.data
        }
    }
    mounted() {
        this.getAlarmData()
    }
}
</script>
<style lang="scss" scoped></style>