Vue3+TypeScriptはaxiosをカプセル化し、リクエスト呼び出しを実装します

// http.ts
'axios' から axios、{ AxiosRequestConfig、AxiosResponse } をインポートします。
「element-plus」から{ElMessage}をインポートします。

const showStatus = (ステータス: 数値) => {
  メッセージ = ''
  スイッチ（ステータス）{
    ケース400:
      メッセージ = 'リクエストエラー (400)'
      壊す
    ケース401:
      メッセージ = '権限がありません。もう一度ログインしてください (401)'
      壊す
    ケース403:
      メッセージ = 'アクセスが拒否されました (403)'
      壊す
    ケース404:
      メッセージ = 'リクエストエラー (404)'
      壊す
    ケース408:
      メッセージ = 'リクエストタイムアウト (408)'
      壊す
    ケース500:
      メッセージ = 'サーバーエラー (500)'
      壊す
    ケース501:
      メッセージ = 'サービスが実装されていません (501)'
      壊す
    ケース502:
      メッセージ = 'ネットワーク エラー (502)'
      壊す
    ケース503:
      メッセージ = 'サービスは利用できません (503)'
      壊す
    ケース504:
      メッセージ = 'ネットワークタイムアウト (504)'
      壊す
    ケース505:
      メッセージ = 'HTTP バージョンはサポートされていません (505)'
      壊す
    デフォルト：
      message = `接続エラー (${status})!`
  }
  `${message} を返します。ネットワークを確認するか、管理者に連絡してください。 `
}

constサービス = axios.create({
  // 共同デバッグ // baseURL: process.env.NODE_ENV === 'production' ? `/` : '/api',
  ベースURL: "/api",
  ヘッダー: {
    得る： {
      'コンテンツ タイプ': 'application/x-www-form-urlencoded; charset=utf-8'
    },
    役職： {
      'コンテンツタイプ': 'application/json;charset=utf-8'
    }
  },
  // クロスサイトアクセス制御を要求するかどうか withCredentials: true,
  タイムアウト: 30000、
  変換リクエスト: [(データ) => {
    データ = JSON.stringify(データ)
    データを返す
  }],
  検証ステータス() {
    // async-await を使用すると、拒否状況の処理が面倒なので、すべて解決を返し、ビジネス コードで例外を処理して true を返します。
  },
  transformResponse: [(データ) => {
    if (typeof data === 'string' && data.startsWith('{')) {
      データ = JSON.parse(データ)
    }
    データを返す
  }]
  
})

// リクエストインターセプター service.interceptors.request.use((config: AxiosRequestConfig) => {
  //トークンを取得してリクエストヘッダーに追加します。let token = localStorage.getItem('token')
  if(トークン){
    config.headers.Authorization = `${token}`;
  }
  設定を返す
}, (エラー) => {
  // ビジネス コードにエラーがスローされました error.data = {}
  error.data.msg = 'サーバー異常です。管理者に連絡してください! '
  Promise.resolve(error) を返します。
})

// レスポンスインターセプター service.interceptors.response.use((response: AxiosResponse) => {
  定数ステータス = レスポンス.ステータス
  メッセージを '' にする
  （ステータス<200 || ステータス> = 300）{
    // http エラーを処理してビジネス コードにスローします msg = showStatus(status)
    応答データの型が '文字列' の場合
      レスポンスデータ = {メッセージ}
    } それ以外 {
      レスポンス.データ.msg = メッセージ
    }
  }
  応答を返す
}, (エラー) => {
  もし(axios.isCancel(エラー)) {
    console.log('繰り返しリクエスト: ' + error.message)
  } それ以外 {
    // エラーコードを処理する
    // ビジネス コードにエラーがスローされました error.data = {}
    error.data.msg = 'リクエストのタイムアウトまたはサーバー例外です。ネットワークを確認するか、管理者に連絡してください。 '
    ElMessage.error(エラーデータmsg)
  }
  Promise.reject(error) を返します。
})

デフォルト サービスをエクスポートする

// http.ts
'axios' から axios、{ AxiosRequestConfig、AxiosResponse } をインポートします。
「qs」からqsをインポートします
「element-plus」から{ElMessage}をインポートします。

//各リクエストの識別子とキャンセル関数を格納するためのマップを宣言します。const pending = new Map()
/**
 * リクエストを追加 * @param {Object} config 
 */
const addPending = (config: AxiosRequestConfig) => {
  定数url = [
    config.method、
    config.url、
    qs.stringify(config.params)、
    qs.stringify(config.data)
  ]。参加する（'＆'）
  config.cancelToken = config.cancelToken || 新しい axios.CancelToken(cancel => {
    if (!pending.has(url)) { // 現在のリクエストが保留中に存在しない場合は追加します pending.set(url, cancel)
    }
  })
}
/**
 * リクエストを削除 * @param {Object} config 
 */
const removePending = (config: AxiosRequestConfig) => {
  定数url = [
    config.method、
    config.url、
    qs.stringify(config.params)、
    qs.stringify(config.data)
  ]。参加する（'＆'）
  if (pending.has(url)) { // 現在のリクエスト識別子がpendingに存在する場合は、現在のリクエストをキャンセルして削除する必要があります。const cancel = pending.get(url)
    キャンセル(url)
    保留中。削除(url)
  }
}

/**
 * 保留中のリクエストをクリアする（ルーティングリダイレクト時に呼び出される）
 */
エクスポートconst clearPending = () => {
  for (const [url, cancel] of pending) {
    キャンセル(url)
  }
  保留中.クリア()
}

// リクエストインターセプター service.interceptors.request.use((config: AxiosRequestConfig) => {
  removePending(config) // リクエストを開始する前に、前のリクエストを確認してキャンセルします。 addPending(config) // 現在のリクエストを保留中に追加します。 let token = localStorage.getItem('token')
  if(トークン){
    config.headers.Authorization = `${token}`;
  }
  設定を返す
}, (エラー) => {
  // ビジネス コードにエラーがスローされました error.data = {}
  error.data.msg = 'サーバー異常です。管理者に連絡してください! '
  Promise.resolve(error) を返します。
})

// レスポンスインターセプター service.interceptors.response.use((response: AxiosResponse) => {

  removePending(response) // リクエストが完了したら、このリクエストを削除します const status = response.status
  メッセージを '' にする
  （ステータス<200 || ステータス> = 300）{
    // http エラーを処理してビジネス コードにスローします msg = showStatus(status)
    応答データの型が '文字列' の場合
      レスポンスデータ = {メッセージ}
    } それ以外 {
      レスポンス.データ.msg = メッセージ
    }
  }

  応答を返す
}, (エラー) => {
  もし(axios.isCancel(エラー)) {
    console.log('繰り返しリクエスト: ' + error.message)
  } それ以外 {
    // エラーコードを処理する
    // ビジネス コードにエラーがスローされました error.data = {}
    error.data.msg = 'リクエストのタイムアウトまたはサーバー例外です。ネットワークを確認するか、管理者に連絡してください。 '
    ElMessage.error(エラーデータmsg)
  }
  Promise.reject(error) を返します。
})

デフォルト サービスをエクスポートする

'vue-router' から {createRouter、createWebHistory、RouteRecordRaw} をインポートします。
'@/views/Login/Login.vue' からログインをインポートします。
//axios で公開されている clearPending 関数を導入します。import { clearPending } from "@/api/axios"

....
....
....

const ルーター = createRouter({
  履歴: createWebHistory(process.env.BASE_URL)、
  ルート
})

router.beforeEach((to, from, next) => {
  // リダイレクトする前に、すべてのリクエストをクリアします clearPending()
  // ...
  次（）
})

デフォルトルーターをエクスポートする

//インターフェース応答フォーマット export interface HttpResponse {
  ステータス: 番号
  ステータステキスト: 文字列
  データ： {
    コード: 番号
    説明: 文字列
    [キー: 文字列]: 任意
  }
}

'./axios' から Axios をインポートします
'@/@types' から { HttpResponse } をインポートします。
/**
 * @interface loginParams - ログインパラメータ * @property {string} username - ユーザー名 * @property {string} password - ユーザパスワード */
インターフェースLoginParams {
  ユーザー名: 文字列
  パスワード: 文字列
}
//User型のインターフェースメソッドをカプセル化します export class UserService {
  /**
   * @description ユーザー情報のクエリ* @param {number} teamId - クエリするチームID
   * @return {HttpResponse} 結果
   */
  静的非同期ログイン(パラメータ: LoginParams): Promise<HttpResponse> {
    Axios を返します('/api/user', {
      メソッド: 'get'、
      レスポンスタイプ: 'json',
      パラメータ: {
        ...パラメータ
      },
    })
  }

  静的非同期レジスタ(パラメータ: LoginParams): Promise<HttpResponse> {
    Axios を返します('/api/user/resgister', {
      メソッド: 'get'、
      レスポンスタイプ: 'json',
      パラメータ: {
        ...パラメータ
      },
    })
  }
}

<テンプレート>
     <input type="text" v-model="アカウント" placeholder="アカウント番号を入力してください" name="ユーザー名" >
     <input type="text" v-model="Password" placeholder="パスワードを入力してください" name="ユーザー名" >
     <button @click.prevent="handleRegister()">ログイン</button>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent、reactive、toRefs} をインポートします。
// インポートインターフェース import { UserService } from '@/api/user'

エクスポートデフォルトdefineComponent({
  設定（） {
    定数状態 = リアクティブ({
      アカウント: 'admin'、//アカウント パスワード: 'hhhh'、//パスワード})

    const handleLogin = 非同期() => {
      constログインパラメータ = {
        ユーザー名: state.Account、
        パスワード: state.Password、
      }
      const res = UserService.login(loginParams) を待機します
       コンソール.log(res)
    }

    const ハンドルレジスタ = 非同期 () => {
      constログインパラメータ = {
        ユーザー名: state.Account、
        パスワード: state.Password、
      }
      const res = UserService.resgister(loginParams) を待機します
      コンソール.log(res)
    }
    戻る {
      ...toRefs(状態)、
      ハンドルログイン、
      ハンドル登録 
    }
  },
})
</スクリプト>