How to read api in vue

Using Vue.js, you can gradually build an application around one of these services and start serving content to users in minutes.

#How to use third-party API to provide services?

We can create ajax requests to process responses and use axios to process API data.

Axios is a Promise-based HTTP client for creating Ajax requests and is perfect for our application. It provides some simple and rich API. It is very similar to fetchAPI, but does not require an additional polyfill for older browsers, and has some clever features.

Previously, vue-resource was usually used in Vue projects, but it has been retired now.

Import axios:

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

Now, once our Vue application is mounted to the page, we can create the home section request to get the list of hot events:

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

Remember: Replace your_api_key with the actual API key you obtained earlier.

The above is the detailed content of How to read api in vue. For more information, please follow other related articles on the PHP Chinese website!