vue はどのようにして複数のサーバー アドレスを要求しますか?

はじめに

フロントエンド開発では、Vue フレームワークの使用に Ajax リクエストが含まれることがよくあります。通常、リクエストする必要があるインターフェイスは同じサーバーによって提供されます。ただし、シナリオによっては、複数の異なるサーバー アドレスを要求する必要がある場合があります (たとえば、ハイブリッド アプリケーションを開発する場合、データを取得するために複数の異なるサーバーを要求する必要があります)。この記事では、Vue で複数のサーバー アドレスをリクエストする方法を紹介します。

オプション 1: axios を使用する

axios は、ブラウザーおよびnode.js で使用できる Promise ベースの HTTP リクエスト ライブラリです。 Vue.js 用に公式に推奨される ajax ライブラリは axios です。

Vue プロジェクトの npm を介して axios をインストールできます:

npm install axios --save

特定の使用法では、axios のdefaults 属性を変更することでデフォルトのリクエスト構成を変更できます。ここで、defaults 属性の BaseURL を変更することで、リクエストのデフォルトのアドレスを変更できます。次のコードに示すように:

//创建axios实例
let instance = axios.create({
  baseURL: 'http://localhost:8080'
})

//第一个接口请求
instance.get('/api/employee')
  .then(function(response) {
    console.log(response.data)
  })
  .catch(function(error) {
    console.log(error)
  })

//第二个接口请求
instance.get('/api/company')
  .then(function(response) {
    console.log(response.data)
  })
  .catch(function(error) {
    console.log(error)
  })

上記のコードでは、axios インスタンスを作成し、defaults 属性を通じてベース アドレスを http://localhost:8080 に設定し、/api/employee と/api/company の 2 つのインターフェイス。

ただし、この方法にはいくつか問題があります。より多くのサーバー アドレスを要求すると、コードの冗長性が生じる可能性があります。さらに、要求する必要があるアドレスが実行時に決定される場合、このメソッドは使用できません。

オプション 2: async/await を使用する

async/await を使用すると、複数の異なるサーバー アドレスをより簡潔にリクエストできます。以下は、async/await を使用したコード例です。

async function loadData() {
  try {
    let employee = await axios.get('http://localhost:8080/api/employee')
    console.log(employee.data)

    let company = await axios.get('http://localhost:8081/api/company')
    console.log(company.data)
  } catch (error) {
    console.log(error)
  }
}

loadData()

async/await を使用すると、コード内で複数のサーバー アドレスを非常に簡潔にリクエストできます。ただし、このアプローチにはいくつかの問題もあります。たとえば、要求されたアドレスが多数使用されている場合、async/await を使用すると、要求プロセスが非常に遅くなる可能性があります。

オプション 3: Promise.all を使用する

JavaScript のネイティブ Promise.all メソッドを使用して、複数のサーバー アドレスをリクエストすることもできます。 Promise.all は、Promise オブジェクトの配列をパラメーターとして受け取り、すべての Promise オブジェクトが解決されるのを待ってから、それらを均一に返します。

Promise.all([
  axios.get('http://localhost:8080/api/employee'), 
  axios.get('http://localhost:8081/api/company')
])
.then(function(result) {
  console.log(result[0].data)
  console.log(result[1].data)
})
.catch(function(error) {
  console.log(error)
});

上記のコードは、2 つのアドレス「http://localhost:8080/api/employee」と「http://localhost:8081/api/company」を同時にリクエストします。リクエストは、正常に返されたときに結果を出力します。

概要

上記は、Vue で複数のサーバー アドレスをリクエストする 3 つの方法です。それぞれの方法にはメリットとデメリットがあり、状況に応じて最適な方法を選択できます。開発では、ユーザーに優れた製品やサービスを提供するために、実際のニーズに応じてテクノロジーを柔軟に活用する必要があります。

以上がvue はどのようにして複数のサーバー アドレスを要求しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。