Async Await Axios + Vue

by Max Alex

HTML

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

<div id="app">
  <pre>{{ people }}</pre>
  <hr>
  <pre>{{ jedi }}</pre>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    people: [],
    jedi: {}
  }),
  async created() {
    alert('Press F12 before continue')

    await axios
      .get('https://swapi.co/api/people')
      .then(response => response.data)
      .then(data => data.results.map(person => person.name))
      .then(results => (this.people = results))

    console.clear()
    console.log('~> this.people', this.people)

    await axios
      .get('https://swapi.co/api/people/85')
      .then(response => response.data)
      .then(Rey => (this.jedi = Rey))

    console.log('~> this.jedi', this.jedi)

    alert('Look into devtools console!')
  }
})