/axios-lab

Primary LanguageHTML

Axios

We will be using Axios for our AJAX requests. Axios is a very popular library and we can use it in the browser and with node.

Installing

Using npm:

$ npm install axios

Using cdn:

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

Request

Get Request Example

axios({
  method: 'get',
  url: 'https://swapi.co/api/people/1'
});

Post Request Example

axios({
  method: 'post',
  url: 'https://swapi.co/api/people/1',
  data: {
    firstName: 'brunos',
    lastName: 'ilovenodejs'
  }
});

Response Object

  • data: the payload returned from the server. By default, Axios expects JSON and will parse this back into a JavaScript object for you.
  • status: the HTTP code returned from the server.
  • statusText: the HTTP status message returned by the server.

Error Object

  • message: the error message text.
  • response: the response object (if received) as described in the previous section.
  • request: the actual XMLHttpRequest object (when running in a browser).

Handling Responses

Since an AJAX call is asynchronous, we need to handle its response in a particular way.

You may have already used some asynchronous javascript with setTimeout(). Potentially you ran into a problem with it.

Let's take a look at how asynchronous javascript works!

To work with asynchronous javascript, we are going to use promises and a promise chain.

// Example 1
axios({
  url: 'https://dog.ceo/api/breed/boxer/images/random',
  method: 'get',
}).then().catch() // .then and .catch are chained at the end of the request

It is easier to ready if we place them on the next line

axios({
  url: 'https://dog.ceo/api/breed/boxer/images/random',
  method: 'get',
})
.then() // .then wants a function to run if the request is succesful
.catch() // .catch wants a function to run if the request is fails

The .then and .catch method want us to pass them functions to run. .then wants a function to run if the request succeeds .catch wants a function to run if the request fails

axios({
  url: 'https://dog.ceo/api/breed/boxer/images/random',
  method: 'get',
})
.then(doGoodStuff) 
.catch(doErrorStuff)

We often use anonymous, fat arrow functions.

axios({
  url: 'https://dog.ceo/api/breed/boxer/images/random',
  method: 'get',
})
.then(() => {
    // code for if the request succeeds
}) 
.catch(()=>{
    // code for if the request fails
})

axios will pass our functions the response or error object so that we can access the data that the API returns to us.

axios({
  url: 'https://dog.ceo/api/breed/boxer/images/random',
  method: 'get',
})
.then((response) => {
    // code for if the request succeeds
    console.log(response)
}) 
.catch((error)=>{
    // code for if the request fails
    console.log(error)
})

Labs

Star Wars

  1. On page load, make an AJAX call to get the data for film 1 an add the following data to the page
  • title
  • release_date
  • episode id
  • opening_crawl
  • director
  • producer

Pokemon

  1. On page load, make an AJAX call to get pikachu data and display the following data on the page
  • name
  • height
  • weight
  • sprites front_default as image
  • moves as list of names
  • ability as list of names

Dogs

  1. On page load, make an AJAX call to display a random dog image on the page.
  2. On page load, make an AJAX call to list all the dog breeds on the page.

Challenge

  • Make each dog breed clickable and on click display all dog images for that breed.

GOT

Research the data on your own and use it how you'd like!