TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

axios をインポートします。{
    Axiosインスタンス、
    アクシオスレスポンス、
    Axiosリクエスト構成、
    アクシオスエラー
} 'axios' より
デフォルトの抽象クラス HttpClient をエクスポートします。
    保護された読み取り専用インスタンス: AxiosInstance

    パブリックコンストラクタ(baseURL = '/api'、タイムアウト = 1000 * 120) {
        this.instance = axios.create({
            ベースURL、
            タイムアウト
        })
        // 1. リクエストインターセプター this._initializeRequestInterceptor()
        // 2. レスポンスインターセプター this._initializeResponseInterceptor()
    }
    プライベート_initializeRequestInterceptor = () => {
        this.instance.interceptors.request.use(
            this._handleRequest、
            this._handleError
        ）
    }
    プライベート _handleRequest = (設定: AxiosRequestConfig) => {}
   
    プライベート_initializeResponseInterceptor = () => {
        this.instance.interceptors.response.use(
            this._handleResponse、
            this._handleError
        ）
    }
    プライベート _handleResponse = (レスポンス: AxiosResponse) => {}
    保護された _handleError = (エラー: AxiosError) => Promise.reject(エラー)
}

     プライベート _handleRequest = (設定: AxiosRequestConfig) => {
        //1. カスタムリクエストヘッダーを追加する config.headers['Authorization'] = 'my token'
        config.headers['mobile'] = '私のモバイル'
        //2. ログインするかどうかを判定する（トークンがあるかどうかを判定）
        
        //3. データ形式を変換する config.data = qs.stringify(config.data)
        設定を返す
    }

 // レスポンスインターセプター private _handleResponse = (response: AxiosResponse) => {
        const { データ、ヘッダー } = レスポンス

        //1.--レスポンストークンを処理して保存する
        const トークン = ヘッダー['authorization']
        if (トークン) {
            this._saveToken(トークン)
        }
       
        //2. -- 応答コードを処理し、ここで try-catch を実行します。バックエンド インターフェースがコードを返さない場合は、直接 try { に戻ります。
            定数コード = データ.コード、
            メッセージ = data.desc || data.msg
            const isSucceed = this._handleResCode(コード、メッセージ、URL)
            if (isSucceed) {
                Promise.resolve(data) を返します。
            } それ以外 {
                Promise.reject(メッセージ) を返します。
            }
        } キャッチ（エラー）{
            Promise.resolve(data) を返します。
        }
       
    }
    //トークンを保存
    プライベート_saveToken(トークン: 文字列) {
        定数 USER = getModule(UserModule)
        USER.setToken(トークン)
    }
    プライベート_handleResCode(コード: 数値、メッセージ: 文字列、URL: 文字列) {
        (コード === 0) の場合 {
            // リクエストが成功した場合は true を返す
        } そうでない場合 (コード===4000) {
            // トークンの有効期限が切れたので、ログインインターフェースに戻ります Vue.prototype.$message.error('ID情報の有効期限が切れました。もう一度ログインしてください')
            router.push({ name: 'ログイン' })
            偽を返す
        } それ以外 {
            // それ以外の場合、すべてのプロンプトはメッセージ情報です Vue.prototype.$message.error(message)
            偽を返す
        }
    }

httpクライアント
ユーザー.ts
uti.ts

'./HttpClient' から HttpClient をインポートします。
'../types/test' から { AlarmItemType } をインポートします。
'../types/index' から { BaseResType } をインポートします

クラス UtilApi は HttpClient を拡張します {
   //たとえば、バックグラウンドで返されるレスポンス res={code:xxx,data:xxx,token:xxx,desc:xxx}
    //まず、res.data の型を定義する必要があります。これは get の最初のパラメータで、AlarmItemType です。
    //次に、応答全体のタイプを定義する必要があります。これは BaseResType<AlarmItemType> です。
    パブリック getAlarmById = (id: 文字列) =>
        this.instance.get<アラームアイテムタイプ、BaseResType<アラームアイテムタイプ>>(
            `/realtime/alarms/queryByAlarmId/${id}`
        ）
}

エクスポート const UTIL_API = 新しい UtilApi()

<テンプレート>
    <section>リクエストデータ:{{alarmData}}</section>
</テンプレート>

<script lang="ts">
'@/api/utilApi' から {UTIL_API} をインポートします。
'vue-property-decorator' から { Vue, Component } をインポートします。
@成分（{
    コンポーネント: {}
})
デフォルトのクラスTestRequestをエクスポートし、Vueを拡張します。
    アラームデータ = {}
    非同期getAlarmData() {
        const res = UTIL_API.getAlarmById('alarmIdc7e9bd47') を待機します
        （res.code == 0）の場合{
            this.$message.success('リクエストは成功しました')
            this.alarmData = res.data
        }
    }
    マウント() {
        this.getAlarmData()
    }
}
</スクリプト>
<style lang="scss" スコープ></style>