基于Typescript與Axios的接口請求管理詳解

更新時間：2021年09月13日 14:35:33 作者：_紅領巾

接口是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應該是抽象的,需要由具體的類去實現(xiàn),然后第三方就可以通過這組抽象方法調用,讓具體的類執(zhí)行具體的方法,這篇文章主要給大家介紹了基于Typescript與Axios的接口請求管理的相關資料,需要的朋友可以參考下

思路

請求攔截

在請求頭添加一些參數(shù)，例如token,uid等
判斷用戶登錄狀態(tài)，如果沒有登錄，直接跳轉登錄
處理請求數(shù)據(jù)轉換發(fā)送請求的數(shù)據(jù)格式，json→urlencoded (可選的)

響應攔截

判斷后端響應的業(yè)務狀態(tài)碼，進行不同的處理
- 例如用戶登錄狀態(tài)過期，直接跳轉登錄
- 統(tǒng)一的報錯提示

先把套路化的代碼寫出來：

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. 請求攔截器
        this._initializeRequestInterceptor()
        // 2. 響應攔截器
        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)
}

簡單說一下上面的代碼，我們創(chuàng)建了一個用于請求接口的HttpClient類，在constructor中定義了baseURL和超時時間timeout,同時定義了請求攔截方法和響應攔截方法。

至此，發(fā)起一個接口的流程如下：

發(fā)送請求之前，調用請求攔截
發(fā)送接口，network出現(xiàn)請求
接口響應，調用響應攔截
響應給前端程序，執(zhí)行對應的邏輯

請求攔截

下面開始詳細的邏輯，請求攔截的時候，可以做的事情如下：

在請求頭添加一些參數(shù)，例如token,uid等
判斷用戶登錄狀態(tài)，如果沒有登錄，直接跳轉登錄
處理請求數(shù)據(jù)轉換發(fā)送請求的數(shù)據(jù)格式，json→urlencoded (可選的)

     private _handleRequest = (config: AxiosRequestConfig) => {
        //1. 添加自定義請求頭
        config.headers['Authorization'] = 'my token'
        config.headers['mobile'] = 'my mobile'
        //2. 判斷是否登錄（判斷是否有toke）
        
        //3. 轉化數(shù)據(jù)格式
        config.data = qs.stringify(config.data)
        return config
    }

響應攔截

得到了響應之后，處理如下：

判斷后端響應的業(yè)務狀態(tài)碼，進行不同的處理
- 如果用戶登錄狀態(tài)過期，直接跳轉登錄
- 統(tǒng)一的報錯提示
保存token

 // 響應攔截器
    private _handleResponse = (response: AxiosResponse) => {
        const { data, headers } = response

        //1.--處理響應的token,保存token
        const token = headers['authorization']
        if (token) {
            this._saveToken(token)
        }
       
        //2. --處理響應碼,這里try-catch一下，如果后端有的接口沒有返回code,直接返回
        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)
        }
       
    }
    //保存token
    private _saveToken(token: string) {
        const USER = getModule(UserModule)
        USER.setToken(token)
    }
    private _handleResCode(code: number, message: string, url: string) {
        if (code === 0) {
            // 請求成功
            return true
        } else if (code===4000) {
            // token失效,跳回登錄界面
            Vue.prototype.$message.error('身份信息過期，請重新登陸')
            router.push({ name: 'login' })
            return false
        } else {
            // 其他情況，統(tǒng)統(tǒng)提示message信息
            Vue.prototype.$message.error(message)
            return false
        }
    }

使用httpClient.ts定義請求

建議請求相關的文件定義在@/api目錄下面,目錄如下

httpClient.ts
user.ts
uti.ts

在對應的文件中定義請求,注意事項

所有請求類需要繼承HttpClient類,HttpClient做了一些統(tǒng)一攔截統(tǒng)一處理請求及響應的工作
請求響應的數(shù)據(jù)需要提供類型，類型定義在@/types/xxx文件中，一個模塊對應一個文件。只有提供了類型，才會有代碼提示

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

class UtilApi extends HttpClient {
   //例如后臺返回的響應  res={code:xxx,data:xxx,token:xxx,desc:xxx}
    //首先需要定義 res.data 的類型 即get的第一個參數(shù)  AlarmItemType
    //然后需要定義整個響應的類型 即 BaseResType<AlarmItemType>
    public getAlarmById = (id: string) =>
        this.instance.get<AlarmItemType, BaseResType<AlarmItemType>>(
            `/realtime/alarms/queryByAlarmId/${id}`
        )
}

export const UTIL_API = new UtilApi()

在組件中請求接口

在需要發(fā)送請求的組件中鍵入請求模塊的關鍵字，例如USER_API,如果安裝了插件TypeScript Importer，就會有相應的模塊導入提示，此時輸入回車即可導入相應的模塊。

<template>
    <section>請求數(shù)據(jù):{{ 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('請求成功')
            this.alarmData = res.data
        }
    }
    mounted() {
        this.getAlarmData()
    }
}
</script>
<style lang="scss" scoped></style>