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

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

まさか、2021年になってもTypeScriptについて聞いたことがない人がいるなんて?プロジェクトでTypeScriptを使用すると、短期的には開発コストが増加しますが、長期的なメンテナンスが必要なプロジェクトでは、TypeScriptを使用するとメンテナンスコストを削減できます。TypeScriptを使用すると、コードの可読性と保守性が向上し、コミュニティが比較的活発です。大きなフロントエンドのトレンドなので、始めましょう〜

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) を返します。
})

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

ルーティング時にすべてのリクエストをキャンセルする

ルーティングファイルindex.tsに追加する

'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()
  // ...
  次()
})

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

カプセル化されたaxiosリクエストライブラリを使用する

カプセル化された応答形式

//インターフェース応答フォーマット 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(状態)、
      ハンドルログイン、
      ハンドル登録 
    }
  },
})
</スクリプト>

Vue3+TypeScript による axios のカプセル化とリクエスト呼び出しの実装に関するこの記事はこれで終わりです。Vue3+TypeScript による axios のカプセル化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • axiosリクエストをvueでカプセル化する方法
  • axios リクエストのカプセル化に基づく Vue アプリケーションのサンプルコード
  • Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)
  • Vue+axiosはリクエストをカプセル化してフロントエンドとバックエンドを分離します
  • Vue が Axios リクエストとインターセプターをカプセル化する手順
  • Axios を使用して Vue プロジェクトで http リクエストをカプセル化する方法
  • Vue axios 繰り返しクリックで最後のリクエストをキャンセルするカプセル化メソッド
  • Vue プロジェクトでの axios のカプセル化リクエスト

<<:  LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

>>:  Tomcat+Mysql の高同時実行構成の最適化の説明

推薦する

JavaScript で円形カルーセルを実装する

この記事では、円形カルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...

MySQLデータ復旧のさまざまな方法の概要

目次1. はじめに2. 直接回復2.1 mysqldumpバックアップの完全リカバリ2.2 xtra...

ボタンの 4 つのクリック応答方法の概要

ボタンは頻繁に使用されます。ここでは、イベント処理メソッドを整理し、実装方法が多数あることを発見しま...

MySQL で指定した桁数の乱数を生成する方法と、バッチで乱数を生成する方法

1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...

MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明

この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...

MySQLのトランザクション特性とレベル原則の分析

1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...

モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...

Tomcat サービスに Java 起動コマンドを追加する方法

私の最初のサーバープログラム現在、オンラインゲームの書き方を学んでいるので、サーバーサイドのプログラ...

反応ルーティングでパラメータを渡すいくつかの方法についての簡単な説明

最初のパラメータ渡し方法は、動的ルーティングパラメータ渡しです。リンクのパス属性を設定することで、ル...

MySQL データベース データのロード 複数の用途

目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...

Docker で ElasticSearch と Kibana をインストールするためのサンプル コード

1. はじめにElasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを...

JS 正規マッチングの落とし穴の記録

最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...

Win10 64ビットMySQL8.0のダウンロードとインストールのチュートリアル図

公式サイトから MySQL をダウンロードしてインストールし、クライアントにログインするにはどうすれ...

Vueはページを更新するために3つの方法を使用する

プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新して...

jsプロジェクトでの双方向データバインディングの簡単な実装方法

目次序文パブリッシュ・サブスクライバ・パターン結果電話要約する序文双方向データ バインディングとは、...