remote-axios-get.md

🙌 Week 12 - Day 1

Class duration: 180 min

Setup (reflects to all the lessons):

• No additional setup required

---

Overview

• Axios | GET Request - restcountries part (45 min)
• Break 1 (10 min)
• Axios | GET Request - stock-chart part (30 min)
• Break 2 (10 min)
• Recap (10 min)
• LAB | Financial data graphing (GET only) (75 min + HW)
• [EXTRA] Google maps

---

Learning objectives:

Students will learn about Axios GET request and how to fetch data from the 3rd party APIs.

After today's class, students will be able to:

1. know how to use Axios library to make HTTP GET requests to the 3rd party APIs,
2. be able to use data received from web APIs in your app.

---

Lesson 1: AXIOS | GET Request

• Sample Code provided below

PART 1 - restcountries api (45 min)

[I DO] Lesson (20 min)

• Axios is a promise-based HTTP client for JS which can be used in the frontend (in browsers) and backend (Node) applications.
• Install via NPM npm i axios or using CDN <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• A standard Axios call for any HTTP request is a method axios() that receives a JavaScript object that specifies different options of the request.

axios({
  method: 'The HTTP method (verb) we are going to use, e.g. GET, POST, PUT, etc.',
  url: 'The url the server is going to receive.',
  params: 'URL parameters to be sent with the request'
})
  .then(response => {
    // Here we can do something with the response object
  })
  .catch(err => {
    // Here we catch the error
  });

• Mostly, we will be using a bit shorter and cleaner syntax:

axios.get(url)
.then(reponseFromApi => /* do something with response */)
.catch(error => /* do something with the error */)

• restcountries api example - sample code
  • explain available endpoints (one or two),
  • then explain the Postman and how to use it,
  • then develop code example.

[YOU DO] Check for understanding (15 min)

• Exercise (from the lesson): Try to get the information hitting the endpoint that returns a response based on the currency that’s officially being used.

• 🚨🚨🚨Solution - check for understanding

[WE DO] Review (10 min)

Review, Q&A, and takeaways.

---

Break 1 (10 min)

---

PART 2 - stock-chart

[I DO] Lesson (30 min)

• stock api with chart - sample code

[YOU DO] Check for understanding (--)

• Students will practice in the lab.

[WE DO] Review (--)

Review, Q&A, and takeaways.

---

Break 2 (10 min)

---

Recap (10 min)

At a high-level review:

• Axios library allows us to handle asynchronous JS calls to servers. Axios make the promise-based HTTP requests to any server. This server could be our server or any remote server.
• The GET Axios request: axios.get(endpointUrl).
• Axios allow us to update DOM without refreshing the page.

---

LAB | Financial data graphing (GET only) (75 min + HW)

• [remote] individual

• [in-class] individual

• LAB | Financial data graphing (GET only)