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 の高同時実行構成の最適化の説明

推薦する

レム適応の一般的なパッケージ3つについて

序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

HTML メタタグの使用の概要 (推奨)

メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...

MySQLインデックスの基本構文

インデックスはソートされたデータ構造です。 where 条件での検索や order by 条件での並...

CSS における XHTML タグの対応する属性と使用法

XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

Node.js の非同期イテレータの詳細な説明

目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...

Ubuntu の仮想環境に Django をインストールする方法

Ubuntu コマンドライン ウィンドウで次の操作を実行します。 1. 仮想環境をインストールする...

JS を使用して HTML で回転するクリスマスツリーを実装する

<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...

CSS を使用してデータ ホットスポット効果を実現する方法

効果は以下のとおりです。 分析する1. ここでは、点を囲む 3 つの円がズームアニメーションを実行し...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

pdf.js を使用して Vue で PDF ファイルをプレビューする方法

ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...

Vueは、センシティブな単語フィルタリングコンポーネントを検出するためのさまざまなアイデアを実装しています。

目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...

HTML テーブルの使い方 (Web ページの視覚効果を表示する)

NetEase Blog で HTML を使用する場合、テンプレートに直接コードを追加できることは...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....