uniappがインターフェースドメイン名を動的に取得する方法を分析する

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景

インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的な json ファイルを読み取って実際のインターフェース ドメイン名を設定することです。利点は、元のドメイン名がブロックされる可能性があるため、バックグラウンドで構成ファイルを直接変更できることです。それ以外の場合は、h5 プロジェクトは問題ないかもしれませんが、アプリを再リリースする必要があります。

コード

// httpService.js は uni.request をカプセル化します。

データ要求の入り口では、まずドメイン名が取得され、つまりconfig.requestRemoteIpメソッドが実行されます。

'@/config' から設定をインポートします
'vue' から Vue をインポートします
'@/service/cacheData.js' から cacheData をインポートします。
const MockUtil = () => import('@/libs/mockUtil.js')
'@/libs/storage.js' からストレージをインポートします。

クラス HttpRequest {

    /**
     * インターフェースデータを読み取ります * @param options リクエスト情報 * @param noMock モックデータを全体として使用する場合、実際のデータをリクエストするための別のインターフェースを設定できます * @param cacheId
     * @returns {*}
     */
    非同期リクエスト解決(オプション、urlCustom = '', noMock = false, cacheId = null) {
        let remoteIP = await config.requestRemoteIp(); // インターフェースリクエストドメイン名を動的に設定する if (process.env.NODE_ENV === 'development' && config.isMockApi && !noMock) {
            this.getMockData(オプション) を返します
        }
        if (cacheId && cacheData[cacheId]) {
            this.testHttp(cacheData[cacheId]) を返します。
        }
        新しい Promise を返します ((resolve, reject) => {
            baseUrl を process.env.NODE_ENV === 'development' とします。config.baseUrl.dev : config.baseUrl.pro;
            options.url = baseUrl + options.url + `${urlCustom}`;
            ユニ.リクエスト(
                オブジェクト.assign({
                    成功: (res) => {
                        (res.statusCode != '200')の場合{
                            uni.showToast({
                                タイトル: 'サーバーエラー:' + res.statusCode、
                                アイコン:「なし」
                            })
                            拒否する()
                        }
                        そうでない場合 (res.data.code == 10001) {
                            ストレージ.removeToken();
                            Vue を新しい Vue() にします。
                            vue.$store.dispatch('ログアウト')
                            vue.$routeUtil.reLaunch('main');
                        }
                        
                        そうでない場合 (res.data.code != 200) {
                            (res.data.message)の場合{
                                uni.showToast({
                                    アイコン: 'なし'、
                                    タイトル: res.data.message
                                });
                            }
                            拒否(res.data)
                        } それ以外 {
                            if (キャッシュID) {
                                キャッシュデータ[キャッシュID] = res.data.data
                            }
                            解決(res.data.data)
                        }
                    },
                    失敗: エラー => {
                        uni.showToast({
                            タイトル: 「サーバーエラー」
                            アイコン:「なし」
                        })
                    }
                }、オプション)
            );
        })
    }

    /**
     *モックデータは必要に応じてインポートされます* @param options
     * @returns {*}
     */
    非同期getMockData(オプション) {
        const モック = MockUtil() を待機します
        const MockUrl = Mock.default[options.url]
        if (typeof MockUrl !== 'function') {
            this.testHttp(MockUrl) を返します
        }
        if (options.method === 'post') {
            this.testHttp(MockUrl(options.data, false)) を返します
        }
        this.testHttp(MockUrl(options.params, true)) を返します
    }
    testHttp(データ) {
        pro = new Promise(function(resolve, reject) { とする
            setTimeout(関数() {
                解決(データ)
            }, 50)
        })
        リターンプロ
    }
}
デフォルトの新しい HttpRequest() をエクスポートします

// config.js

定数設定 = {
  isMockApi: false、
  // リクエスト URL: 'http://qiniu.eightyin.cn/teacherpath.json?time=' + Math.random().toString(36),
  リクエストURL: 'http://qiniu.eightyin.cn/teacherpathtest.json?time=' + Math.random().toString(36),
  ベースURL: {
     
    開発者: ''、
    プロ: ''
  },
  画像: {
    ossドメイン: ''
  },
  uuid: Math.random().toString(36).substring(3, 20),
  リクエストリモートIP: () => {
      コンソールログ('config:', config)
      (config.RemoteIpInited) の場合
        Promise.resolve() を返します。
        新しい Promise を返します ((resolve, reject) => {
            uni.リクエスト({
                URL: config.requestUrl、
                成功: (応答) => {
                    //todo テスト // config.baseUrl.pro = response.data.data.path;
                    config.baseUrl.dev = 'http://bayin5.mycwgs.com/';
                    config.img.ossDomain = response.data.data.ossDomain;
                    config.RemoteIpInited = true;
                    解決する()
                },
                失敗: () => {
                    config.RemoteIpInited = true;
                    解決する()
                }
            })
        });
  }
}

デフォルト設定をエクスポート

上記は、uniapp がインターフェイスドメイン名を動的に取得する方法の詳細な分析です。uniapp がインターフェイスドメイン名を動的に取得する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • uniapp プロジェクトの最適化方法と提案
  • vscodeを使用してuniappを開発する方法
  • uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード
  • uniappを使用してWeChatミニプログラムでEChartsを使用する方法
  • uniapp 要素ノードスタイルの動的変更の詳細な説明

<<:  SQL ステートメント実行の詳細な説明 (MySQL アーキテクチャの概要 -> クエリ実行プロセス -> SQL 解析順序)

>>:  Zabbix 監視ソリューション - 最新の公式バージョン 4.4 [推奨]

推薦する

最も完全なpackage.json分析

目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...

Windows 10にOdoo12開発環境をインストールする方法

序文多くの友人は Mac コンピューターを持っていないと言っていますが、Windows 開発は実際に...

MySQL に IP アドレスを効果的に保存する方法と、文字列 IP と数値を変換する方法の詳細な説明

High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...

Docker プルタイムアウトの解決策

最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...

CentOS8 jdk8 / java8 のインストールチュートリアル(推奨)

序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...

antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...

関数の分類の詳細な説明とJavascriptでのこのポイントの例

JS で関数を定義する 3 つの方法例を挙げて説明しましょう。 <スクリプト> //メソ...

Ubuntuで顔認識ログインを実装するための完全な手順

1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...

Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。

序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...

Windows が MySQL サービスを開始できず、エラー 1067 を報告する場合の解決策

突然、MySQLにログインすると、アクセスが拒否されたか、データベースに接続できないと表示されました...

MySQL でコマンドを使用して階層検索を実現する方法の詳細な説明

序文この記事は主にMySQLコマンド階層検索ヘルプの使用に関する内容を紹介します。この記事のサンプル...

Linux周辺ファイルシステムのカスタマイズ方法

序文一般的に、Linux システムについて話すときは、Linux カーネルと GNU プロジェクトに...

VueでTypeScriptを使用する方法

導入近年、TypeScript を求める声がますます高まり、TypeScript はフロントエンドに...

WeChat アプレットの日付と時刻のコンポーネント (年、月、日、時間、分)

この記事の例では、WeChatアプレットの日付と時刻コンポーネントの具体的なコードを参考までに共有し...

Mysql WorkBench のインストールと設定のグラフィックチュートリアル

この記事では、Mysql WorkBenchのインストールと設定のグラフィックチュートリアルを参考ま...