Wie fordert Vue mehrere Serveradressen an?

Vorwort

Wenn wir in der Front-End-Entwicklung das Vue-Framework verwenden, sind häufig Ajax-Anfragen beteiligt. Normalerweise werden die von uns angeforderten Schnittstellen vom selben Server bereitgestellt. In einigen Szenarien müssen wir jedoch mehrere verschiedene Serveradressen anfordern. Wenn wir beispielsweise eine Hybridanwendung entwickeln, müssen wir mehrere verschiedene Server anfordern, um Daten abzurufen. In diesem Artikel wird erläutert, wie Sie in Vue mehrere Serveradressen anfordern.

Option 1: Axios verwenden

axios ist eine Promise-basierte HTTP-Anforderungsbibliothek, die in Browsern und node.js verwendet werden kann. Die offiziell empfohlene Ajax-Bibliothek für Vue.js ist axios.

Wir können Axios über npm im Vue-Projekt installieren:

npm install axios --save

Bei spezifischer Verwendung können wir die Standardanforderungskonfiguration ändern, indem wir das Standardattribut von Axios ändern. Hier können wir die Standardadresse der Anfrage ändern, indem wir die baseURL des Standardattributs ändern. Wie im folgenden Code gezeigt:

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

Im obigen Code haben wir eine Axios-Instanz erstellt und die Basisadresse über das Standardattribut auf http://localhost:8080 festgelegt und dann /api/employee und /api/company angefordert bzw. Zwei Schnittstellen.

Allerdings gibt es bei dieser Methode einige Probleme. Wenn wir mehr Serveradressen anfordern, kann dies zu Coderedundanz führen. Wenn außerdem die angeforderte Adresse zur Laufzeit ermittelt werden muss, kann diese Methode nicht verwendet werden.

Option 2: Async/await verwenden

Durch die Verwendung von async/await können wir mehrere verschiedene Serveradressen präziser anfordern. Das Folgende ist ein Codebeispiel für die Verwendung von 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()

Durch async/await können wir mehrere Serveradressen sehr präzise im Code anfordern. Allerdings gibt es bei diesem Ansatz auch einige Probleme. Wenn beispielsweise eine große Anzahl angeforderter Adressen verwendet wird, kann die Verwendung von async/await dazu führen, dass der Anforderungsprozess sehr langsam wird.

Option 3: Promise.all verwenden

Wir können auch die native Promise.all-Methode von JavaScript verwenden, um mehrere Serveradressen anzufordern. Promise.all akzeptiert ein Array von Promise-Objekten als Parameter und wartet dann auf die Auflösung aller Promise-Objekte, bevor es sie einheitlich zurückgibt.

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

Der obige Code fordert die beiden Adressen „http://localhost:8080/api/employee“ und „http://localhost:8081/api/company“ gleichzeitig an und gibt sie aus, nachdem beide Anfragen erfolgreich zurückgegeben wurden ihre Ergebnisse.

Zusammenfassung

Die oben genannten sind drei Möglichkeiten, mehrere Serveradressen in Vue anzufordern. Jede Methode hat ihre Vor- und Nachteile, und wir können je nach Situation die Methode auswählen, die am besten zu uns passt. In der Entwicklung müssen wir die Technologie flexibel entsprechend den tatsächlichen Bedürfnissen einsetzen, um den Benutzern hervorragende Produkte und Dienstleistungen anzubieten.

Das obige ist der detaillierte Inhalt vonWie fordert Vue mehrere Serveradressen an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!