Uniapp開発統合構成リクエストアドレス

モバイル アプリケーションの人気に伴い、開発者はさまざまなオペレーティング システムの開発方法に徐々に適応し、より迅速に開発し、リソースをより効率的に使用する方法を測定する必要があります。 Uniapp は、時代の要求に応じて登場したクロスプラットフォーム フレームワークで、マルチターミナル (H5、WeChat アプレット、アプリ) アプリケーションを迅速に構築できるだけでなく、一般的に使用される複数のライブラリ (vuex、uni など) を統合します。 -uiなど)。 uniapp の開発プロセスでは、多くのリクエストでネットワーク リクエストが必要になります。統一されたリクエスト アドレス構成により、メンテナンスとアップグレードが容易になります。この記事では、uniapp開発とaxiosリクエストライブラリの2つの側面からリクエストアドレスを統一設定する方法を紹介します。

1. uniapp でのリクエストの使用

uniapp のリクエストではネイティブの XMLHttpRequest も使用できますが、開発効率を考慮して、通常はより使いやすいリクエスト ライブラリである uni-request を選択します。 uni-request は XMLHttpRequest と uniapp のリクエストをカプセル化し、Promise を使用して処理できます。同時に、uni-request はインターセプターや再試行などの一連の実用的な機能もカプセル化します。 uni-request を使用する場合、$http オブジェクトを main.js にマウントする必要があります:

<code class="javascript">import request from '@/common/request.js'

Vue.prototype.$http = request</code>

次に、リクエストを行う必要がある場合、$http オブジェクトの下のメソッドを直接呼び出してリクエストを行うことができます。 :

<code class="javascript">this.$http.get('/api/user').then((res) => {
  console.log(res)
})</code>

2. リクエスト アドレスを設定する

リクエスト アドレスを均一に設定するには、次の 2 つの側面を考慮する必要があります。

1. uniappの全体的な構成

通常、リクエストは別のファイルにカプセル化して使用します。このファイル内のアドレスの構成を要求することは、比較的簡単な操作である可能性があります。 request.js ファイルに次のコードを追加できます:

<code class="javascript">const baseURL = 'https://your.base.url.com/api/'

export default function(options) {
  // function definition
  // ...
  return uni.request({
    url: baseURL + options.url,
    method: options.method || 'GET',
    data: options.data || {},
    header: options.header || {}
  })
}</code>

この例では、baseURL は https://your.base.url.com/api/ に設定されています。これは、すべてのリクエストでこの BaseURL を追加することを意味します。その前で。したがって、リクエストを呼び出すときは、相対アドレスを呼び出すだけで済みます。

2. axios でのグローバル設定

uniapp では、axios を使用してリクエストを操作することもできます。開発プロセスではあまり使用されませんが、axios にはより柔軟で強力なインターセプターと構成アイテムがあります。実際の利用シーンではuni-requestよりも汎用性が高いと言えるでしょう。

main.js ファイルでグローバル設定を実行できます:

<code class="javascript">import axios from 'axios'

axios.defaults.baseURL = 'https://your.base.url.com/api/'
Vue.prototype.$http = axios</code>

このようにして、後続のリクエストでも、この BaseURL に従います。

3. まとめ

この記事では、axisoとuniappの両方からリクエストアドレスを統一して設定する方法を紹介します。開発者にとって、これは従来の宣言型ルーティングだけでなく、より効率的なチーム コラボレーションと、より柔軟なビジネス ロジックの制御を意味します。読者が自分が作成した uniapp 内のリクエストについて詳しく学べば、グローバルなリクエスト アドレスの調整を簡単に実装できるようになると思います。

以上がUniapp開発統合構成リクエストアドレスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。