So lesen Sie die API in Vue

Mit Vue.js können Sie schrittweise eine Anwendung rund um einen dieser Dienste erstellen und innerhalb von Minuten mit der Bereitstellung von Inhalten für Benutzer beginnen.

Wie verwende ich die API eines Drittanbieters, um Dienste bereitzustellen?

Wir können Ajax-Anfragen erstellen, um Antworten zu verarbeiten, und Axios verwenden, um API-Daten zu verarbeiten.

Axios ist ein Promise-basierter HTTP-Client zum Erstellen von Ajax-Anfragen und eignet sich perfekt für unsere Anwendung. Es bietet eine einfache und umfangreiche API. Es ist fetchAPI sehr ähnlich, erfordert jedoch kein zusätzliches Polyfill für ältere Browser und verfügt über einige nette Funktionen.

Früher wurde vue-resource häufig in Vue-Projekten verwendet, aber es wurde jetzt eingestellt.

Axios importieren:

<!-- ./index.html -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Sobald unsere Vue-App auf der Seite bereitgestellt ist, können wir die Home-Abschnittsanforderung erstellen, um die Liste der aktuellen Ereignisse zu erhalten:

// ./app.js
const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
    .then(response => {this.results = response.data.results})
  }
});

Denken Sie daran: Ersetzen Sie your_api_key durch den tatsächlichen API-Schlüssel, den Sie zuvor erhalten haben.

Das obige ist der detaillierte Inhalt vonSo lesen Sie die API in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!