uniapp がリクエストパスをカプセル化する方法-uni-app-php.cn

モバイルインターネットの普及に伴い、モバイルアプリケーションの開発の人気が高まっています。リクエストパスをカプセル化することにより、サーバーデータと対話する一部の操作をより簡単に実行できます。この記事では、uniapp でリクエストパスをカプセル化する方法を紹介します。

1. リクエストパスを理解する

モバイルアプリケーション開発では、通常、サーバーと通信してデータを取得し、動的データを取得する必要があり、これらのデータの取得には HTTP を使用した通信が必要です。プロトコル。 HTTP リクエストは、URL アドレスとリクエストパラメータで構成されます。 URL アドレスには GET、POST などを通じてアクセスでき、リクエストパラメーターは通常、キーと値のペアの形式で渡されます。

モバイルアプリケーションを開発する場合、通常、一元的な管理とメンテナンスを容易にするためにサーバーアドレスを定数に設定します。

const baseUrl = 'http://www.example.com/api';

ログイン後にコピー

その後、リクエストを送信するたびに、リクエストを手動で結合する必要があります。アドレスとリクエストパラメータを完全な URL に変換します:

const url = baseUrl + '/user/login?username=' + username + '&password=' + password; uni.request({ url: url, success: (res) => { console.log(res.data); } })

ログイン後にコピー

この書き方でもリクエストを実装できますが、サーバーアドレスが変更されると、すべてのコードでリクエストアドレスを手動で見つけて変更する必要があり、これは非常に面倒です。トラブル。

2. リクエストパスのカプセル化

したがって、リクエストパスをカプセル化することで、サーバーアドレスとリクエストパラメーターを別々に処理できるため、一元的な管理とメンテナンスが容易になります。

uniapp では、vuex を通じて状態管理を実行し、グローバルアクセスのために vuex でリクエストパスをカプセル化できます:

// store/index.js const state = { baseUrl: 'http://www.example.com/api' } const getters = { baseUrl: state => state.baseUrl } export default new Vuex.Store({ state, getters })

ログイン後にコピー

次に、コード内の vuex を通じてそれを取得できます。リクエストパス:

const url = store.getters.baseUrl + '/user/login'; uni.request({ url: url, data: { username: username, password: password }, success: (res) => { console.log(res.data); } })

ログイン後にコピー

サーバーアドレスが変更された場合、vuex のbaseUrl 属性を変更するだけで済みます。