まさか、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています
>>: Tomcat+Mysql の高同時実行構成の最適化の説明
序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...
docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...
メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...
インデックスはソートされたデータ構造です。 where 条件での検索や order by 条件での並...
XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...
1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...
目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...
Ubuntu コマンドライン ウィンドウで次の操作を実行します。 1. 仮想環境をインストールする...
<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...
効果は以下のとおりです。 分析する1. ここでは、点を囲む 3 つの円がズームアニメーションを実行し...
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...
目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...
NetEase Blog で HTML を使用する場合、テンプレートに直接コードを追加できることは...
目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....