Networking in the Browser Module #36

Question 1

What’s the “wrapper” that should enclose an API call when using Fetch or Axios?

Answer 1

(async ( ) => {

//FETCH or Axios statements about where to connect and what to do if a problem occurs

} )( )

Breaking down the above. Async is a function that is declared with the word async. Arguments/Params can be passed just as is possible with any function. Here we are using an arrow function so the name is omitted.

Question 2

Add in the likely statements inside of the async function call.

Answer 2

1 (async ( ) => {
2 const response = await fetch('url')
3 const data = await response.json
4 } catch (error) {
5 console.error(error)
 } )( )

Explanation:
Line 1: opens the async function that wraps the call.
Line 2: “Go to this URL” & try to get a response code.
Line 3: Assign the returned object to a variable and try to get a JSON object as a response.
Line 4 if an error occurs catch it
Line 5 log the error to the console.

Question 3

How is it possible to get more information about the API call you’re making?

Answer 3

By inspecting the returned headers. Therefor it is helpful to ask the API specifically for the information you seek. Example:

(async ( ) => {
try { const response = await fetch( ‘url’ )
console.log(‘response.headers.get(‘Content-Type’))
console.log(response.headers.get(‘Date’))
} catch(error) {
console.error(error)
}
})( )

Question 4

What properties does the response object return?

Answer 4

method: GET, POST etc.
url: URL of the request
headers: the associated headers
referrer: the referrer of the request
cache: the cache mode of the req

Question 5

How can you set the request headers and return the Headers object. (Hint: not the response headers, the Headers OBJ.)

Answer 5

By using a Headers constructor. See below:

const headers = new Headers( )
headers.append('Content-Type', 'application/json')

or:

const headers = new Headers( {
  'Content-Type': 'application/json'
} )

Question 6

How to create a secure websockets connection?

Answer 6

const url = "wss://myserver.com/something"
const connection = new WebSocket('url')