- Identify synchronous and asynchronous code
- Describe the process of communicating with the server
- Process data successfully returned from fetch()
Given the following code, list the order of console.logs:
console.log("Hello")
fetch('https://randomuser.me/api/')
.then( res => res.json() )
.then( data => {
console.log("Hi")
})
console.log("Sup?")
When fetchData is executed what will be console logged?
function fetchData(){
let data = fetch('https://randomuser.me/api/')
.then( res => res.json() )
.then( res => res )
console.log(data)
}
fetchData()
What will be console logged when the following code is run? Why?
function fetchData(){
let data = fetch('https://randomuser.me/api/')
.then( res => res.json() )
.then( json => console.log(json) )
}
fetchData()
What will be console logged when the following code is run? Why?
function fetchData(){
let data = fetch('https://randomuser.me/api/')
.then( res => res.json() )
.then( console.log )
}
fetchData()
In your own words: what does asynchronous mean?
Write out the request and response cycle. What is its purpose? How does it work?
Check out the JSON you get from making a GET request to https://randomuser.me/api/.
Open up the Github repository for this reading and view the provided
src/index.html
file in the browser. In src/index.js
, make an AJAX request to
https://randomuser.me/api/ when the button is
clicked and append the retrieved information to the DOM. Use the labels to
append the right data in the appropriate h4's, h3's and img tags.