Consuming a REST API as a client Module #67 Flashcards
What are some of the things we need to think about in order to consume an api?
- How to connect
2. Which library to use: XHR, Fetch, Node https, Axios, or the request libraray.
What is an XHR request comprised of?
- A variable with XMLhttprequest( ) assigned to it
- An event listener
- The variable for the item you’re requesting
- A for in loop
- The request
const xhr = new XMLHttpRequest() xhr.addEventListener('readystatechange', function() { if (this.readyState === this.DONE) { const breeds = JSON.parse(this.responseText).message for (const breed in breeds) { console.log(breed) } } })
xhr. open(‘GET’, ‘https://dog.ceo/api/breeds/list/all’)
xhr. send( )
What are the main ingredients for a fetch request?
- An async call
- a variable for the response and and await stating what we want and the method
- A data variable to recieve the data with JSON
- A for in loop
(async ( ) => { const response = await fetch('https://dog.ceo/api/breeds/list/all', { method: 'GET' })
const data = await response.json() for (const breed in data.message) { console.log(breed) } })( )
What parts does the Node HTTPS Module have in it?
- A require statement that is assigned to a variable
- An options variable with a method, hostname, and path assignments
- The request assigned also to a variable with (options, res) callbacks
- A “chunks” variable assigned to an empty array
- A response handler with (data, chunk) callbacks that adds data to the empty array
- Another response handler to parse the JSON
- Disconnect method
const http = require(‘https’)
const options = { method: 'GET', hostname: 'dog.ceo', path: '/api/breeds/list/all', }
const req = http.request(options, res => { const chunks = []
res.on(‘data’, chunk => {
chunks.push(chunk)
})
res.on('end', () => { const body = Buffer.concat(chunks) const data = JSON.parse(body.toString()) for (const breed in data.message) { console.log(breed) } }) })
req.end( )
What does the request library have in it’s requests?
- a request assigned to a variable
- an options varaiable with a method, url, json(true) assignments
- a request handler with options, error, response, and body callbacks
- a for in loop that loops through the a topic in the body
Finally what parts does an Axios request have?
- Require the axios library
- an async/await function
- a for in loop that loops through a specified part of the response data
What does the POST request from Axios look like?
- Require the Axios library
- async response/ await/ post function
2a, Data
2b. headers
What are a few of the advantages of Axios vs Fetch
- Supports older browsers
- Has a way to abort the request
- Has a way to set a response timeout
- built in CSRF protection
- Supports upload progress
- Transforms data to JSON automatically
- Works with node.js
How can we install Axios?
npm install axios
or include it in an html page using unpkg
Where does the https request start within axios
From the axios object:
axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get', data: { foo: 'bar' } })
What are the two most common methods used in axios?
.post and .get (Just as in jQuery)
What are the methods for the other HTTP verbs in axios?
axios. delete( )
axios. put( )
axios. patch( )
axios. options( )
axios. head( ) which is a method to get the HTTP headers and discard the body
Here’s an example (again) of the Axios GET request with both async and promise based
PROMISE
const axios = require(‘axios’)
const getBreeds = async () => { try { return await axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) } }
const countBreeds = async () => { const breeds = await getBreeds()
if (breeds.data.message) {
console.log(Got ${Object.entries(breeds.data.message).length} breeds
)
}
}
countBreeds()
const axios = require(‘axios’)
const getBreeds = async () => { try { return await axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) } }
const countBreeds = async () => { const breeds = await getBreeds()
if (breeds.data.message) {
console.log(Got ${Object.entries(breeds.data.message).length} breeds
)
}
}
countBreeds()
How are parameters passed via URL in Axios?
By passing the url
axios.get(‘https://site.com/?foo=bar’)
How are arguments passed in a POST request as a second parameter (Axios)
By passing the url first and then passing the parameter in the next line
axios.post(‘https://site.com/’, {
foo: ‘bar’
})