TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

'axios' から axios、{ AxiosRequestConfig、AxiosRequestHeaders、AxiosResponse } をインポートします。
'@/types' から { IResponseData } をインポートします。
'element-plus' から { ElMessage、ElLoading、ILoadingInstance } をインポートします。

タイプTAxiosOption = {
  ベースURL: 文字列;
  タイムアウト: 数値;
}

定数設定 = {
  ベースURL: '/',
  タイムアウト: 120000
}

読み込み: ILoadingInstance;

クラスHttp {
  //サービス: AxiosInstance;
  サービス;
  コンストラクタ(config: TAxiosOption) {
    this.service = axios.create(config)

    /* リクエストのインターセプション this.service.interceptors.request.use(config => config, error => Promise.reject(error))*/
    this.service.interceptors.request.use((config: AxiosRequestConfig) => {
      /* ビジネスロジック 1. 全画面読み込みアニメーションを有効にする 2. データ暗号化 config.data
      3. vuex または localstorage と組み合わせて、リクエスト ヘッダーにトークンを追加します。
          store.getters.token の場合、config.headers['x-token'] は store.getters.token になります。
          それ以外の場合は 4 をリダイレクトします。…
      */
      読み込み = ElLoading.service({
        ロック: 真、
        テキスト: '読み込み中'、
        スピナー: 'el-icon-loading',
        背景: 'rgba(255, 255, 255, 0.7)',
      })

      localStorage.getItem('トークン') の場合 {
        (config.headers を AxiosRequestHeaders として)。authorization = localStorage.getItem('token') を文字列として
      }

      設定を返す
    }, エラー => {
      /* リクエストエラー 1. 全画面読み込みアニメーションを閉じる 2. エラーページにリダイレクトする */
      読み込み中.閉じる()
      return Promise.reject(error) // コード内でエラーメッセージをキャッチするため})


    /* レスポンスのインターセプション this.service.interceptors.response.use(response => response.data, error => Promise.reject(error))*/
    this.service.interceptors.response.use((レスポンス: AxiosResponse<any>) => {
      /* 
      1. 全画面読み込みアニメーションを閉じる 2. データの復号化 3. response.data.code に基づいて異なるエラー処理を実行する 4. …
      */
      読み込み中.閉じる()

      定数データ = レスポンス.データ
      const { コード } = データ

      (コード !== '000000') の場合 {
        ElMessage.error(データ.メッセージ)
        Promise.reject(データ) を返す
      }
      応答データを返す
    }, エラー => {
      読み込み中.閉じる()
      ElMessage.error('リクエストが失敗しました',)
      Promise.reject(error) を返します。
    })
  }
  get<T>(url: 文字列、params?: オブジェクト、_object = {}): Promise<IResponseData<T>> {
    this.service.get(url, { params, ..._object }) を返します
  }
  post<T>(url: 文字列、params?: オブジェクト、_object = {}): Promise<IResponseData<T>> {
    this.service.post(url, params, _object) を返します
  }
  put<T>(url: 文字列、params?: オブジェクト、_object = {}): Promise<IResponseData<T>> {
    this.service.put(url, params, _object) を返します
  }
  削除<T>(url: 文字列、パラメータ?: 任意、_object = {}): Promise<IResponseData<T>> {
    this.service.delete(url, { params, ..._object }) を返します
  }
}

デフォルトの新しいHttp(config)をエクスポートします

エクスポートインターフェースIResponseData<T> {
  ステータス: 番号;
  メッセージ?:文字列;
  データ:T;
  コード: 文字列;
}

<テンプレート lang="pug">
//- クエリフォーム
el-form(:inline="true" :model="queryForm" size="small" label-position="left")
  el-フォーム項目
    el-button(type="primary" @click="operate")
      | el-form-item(label="製品番号") を追加
    el-input(v-model="queryForm._id")
  el-form-item(label="製品名")
    el-input(v-model="queryForm.goodName")
  el-form-item(ラベル="数量")
    el-input(v-model="queryForm.count")
  el-form-item(label="詳細")
    el-input(v-model="queryForm.des")
  el-フォーム項目
    el-button(type="primary" @click="query")
      | クエリ //- リスト el-table(:data="list" center size="mini")
  el-table-column(prop="goodName" label="製品名")
  el-table-column(prop="count" label="quantity")
  el-table-column(prop="des" label="詳細")
  el-table-column(ラベル="操作")
    テンプレート(#default="props")
      el-button(type="primary" size="small" @click="operate(props.row)")
        | 編集 el-button(type="danger" size="small" @click="operate(props.row, true)")
        | 削除 //- 追加、編集 el-drawer(v-model="detailShow" :title="editShow === true ? 'Edit' : 'Add'" direction="rtl")
  el-form(:model="detailForm" size="small" label-width="80px" label-position="left")
    //- el-form-item(label="製品番号" 必須 v-if="false")
    el-form-item(label="製品番号" 必須 v-if="log(editShow)")
      el-input(v-model="detailForm._id" 読み取り専用)
    el-form-item(label="製品名" 必須) 
      el-input(v-model="detailForm.goodName")
    el-form-item(ラベル="数量")
      el-input(v-model="detailForm.count")
    el-form-item(label="詳細")
      el-input(v-model="detailForm.des")
    el-フォーム項目
      el-button(type="primary" size="small" @click="送信")
        | OK</テンプレート>

<script lang="ts">
'vue' から {defineComponent、reactive、ref} をインポートします。
'element-plus' から { ElMessage } をインポートします
'@/types/goods' から { IGoodInfo, IList } をインポートします。
'@/http' から http をインポートします

エクスポートデフォルトdefineComponent({
  名前: 'ホーム'、
  設定（） {
    const リスト = ref<IGoodInfo[]>([])

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

    クエリ()


   	非同期関数クエリ（）{
      const { data } = http.get<IList>('/goods/list', queryForm.value) を待機します。
      リスト.値 = データ.リスト
    }

    非同期関数operate(form?: IGoodInfo, flag?: true) {
      if (!form) {
        詳細表示値 = true
        editShow.value = false
        detailForm.value = { goodName: ''、count: ''、_id: ''、des: '' }
      } それ以外の場合 (!フラグ) {
        詳細表示値 = true
        editShow.value = true
        detailForm.value = { ...フォーム }
      } それ以外 {
        http.delete('/goods/delete', { _id: form._id }) を待機します
        クエリ()
      }
    }

    非同期関数submit() {
      (detailForm.value._id) の場合 {
        http.put('/goods/edit', detailForm.value) を待機します。
      }それ以外{
        http.put('/goods/edit', detailForm.value) を待機します。
      }

      detailShow.value = false
      エルメッセージ({
        メッセージ: 「操作は成功しました」
        タイプ: '成功'、
      })
      クエリ()
    }


    関数 log(params:any) {
     console.log(パラメータ);
     パラメータを返す
    }

    戻る {
      詳細表示、
      編集表示、
      リスト、
      クエリフォーム、
      詳細フォーム、
      クエリ、
      操作する、
      提出する、
      ログ
    }
  }
});
</スクリプト>

エクスポートインターフェースIGoodInfo {
  _id: 文字列;
  goodName: 文字列;
  カウント: 文字列;
  des: 文字列
}

エクスポートインターフェースIList {
  リスト: IGoodInfo[]
}