Comment lire l'API dans Vue

En utilisant Vue.js, vous pouvez progressivement créer une application autour de l'un de ces services et commencer à proposer du contenu aux utilisateurs en quelques minutes.

Comment utiliser des API tierces pour fournir des services ?

Nous pouvons créer des requêtes ajax pour traiter les réponses et utiliser axios pour traiter les données API.

Axios est un client HTTP basé sur Promise pour créer des requêtes Ajax et est parfait pour notre application. Il fournit une API simple et riche. Il est très similaire à fetchAPI, mais ne nécessite pas de polyfill supplémentaire pour les navigateurs plus anciens et possède des fonctionnalités intelligentes.

Auparavant, vue-resource était généralement utilisé dans les projets Vue, mais il a maintenant été retiré.

Importer axios :

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

Maintenant, une fois notre application Vue montée sur la page, nous pouvons créer la demande de section d'accueil pour obtenir la liste des événements chauds :

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

N'oubliez pas : remplacez your_api_key par la clé API réelle que vous avez obtenue précédemment.

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!