Comment vue demande-t-il plusieurs adresses de serveur ?

Avant-propos

Dans le développement front-end, lorsque nous utilisons le framework Vue, les requêtes Ajax sont souvent impliquées. Habituellement, les interfaces que nous devons demander sont fournies par le même serveur. Mais dans certains scénarios, nous devons demander plusieurs adresses de serveur différentes. Par exemple, lors du développement d'une application hybride, nous devons demander plusieurs serveurs différents pour obtenir des données. Cet article explique comment demander plusieurs adresses de serveur dans Vue.

Option 1 : Utiliser axios

axios est une bibliothèque de requêtes HTTP basée sur Promise qui peut être utilisée dans les navigateurs et node.js. La bibliothèque ajax officiellement recommandée pour Vue.js est axios.

Nous pouvons installer axios via npm dans le projet Vue :

npm install axios --save

Dans une utilisation spécifique, nous pouvons changer la configuration de la requête par défaut en modifiant l'attribut defaults d'axios. Ici, nous pouvons changer l'adresse par défaut de la requête en modifiant la baseURL de l'attribut defaults. Comme le montre le code suivant :

//创建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)
  })

Dans le code ci-dessus, nous avons créé une instance axios et défini l'adresse de base sur http://localhost:8080 via l'attribut par défaut, puis demandé /api/employee et /api/company respectivement Deux interfaces.

Cependant, cette méthode pose quelques problèmes. Si nous demandons plus d'adresses de serveur, cela peut entraîner une redondance du code. De plus, si nous avons besoin que l'adresse demandée soit déterminée au moment de l'exécution, cette méthode ne peut pas être utilisée.

Option 2 : Utiliser async/await

En utilisant async/await, nous pouvons demander plusieurs adresses de serveur différentes de manière plus concise. Ce qui suit est un exemple de code utilisant 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()

Grâce à async/await, nous pouvons demander plusieurs adresses de serveur de manière très concise dans le code. Cependant, cette approche pose également certains problèmes. Par exemple, si un grand nombre d’adresses demandées sont utilisées, l’utilisation de async/wait peut ralentir considérablement le processus de demande.

Option 3 : Utilisez Promise.all

Nous pouvons également utiliser la méthode native Promise.all de JavaScript pour demander plusieurs adresses de serveur. Promise.all accepte un tableau d'objets Promise comme paramètres, puis attend que tous les objets Promise soient résolus avant de les renvoyer uniformément.

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)
});

Le code ci-dessus demandera les deux adresses 'http://localhost:8080/api/employee' et 'http://localhost:8081/api/company' en même temps, et affichera une fois que les deux demandes auront été renvoyées avec succès. leurs résultats.

Résumé

Vous trouverez ci-dessus trois façons de demander plusieurs adresses de serveur dans Vue. Chaque méthode a ses avantages et ses inconvénients, et nous pouvons choisir la méthode qui nous convient le mieux en fonction de la situation spécifique. Lors du développement, nous devons utiliser la technologie de manière flexible en fonction des besoins réels afin de fournir aux utilisateurs d'excellents produits et services.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!