Server Requests Flashcards

1
Q

What does AJAX stand for?

A

Asynchronous Javascript and XML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Why do we use AJAX requests?

A

AJAX requests allow us to make requests to the server after the initial page loads.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the XHR API?

A

XMLHttpRequest API allows us to make many types of requests to the server and accept different forms of data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What does JSON stand for?

A

JavaScript Object Notation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How do we start the process of creating an XMLHttpRequest?

A

We define a variable and set it equal to a new XMLHttpRequest object

const xhr = new XMLHttpRequest( )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Generally, how do we store the url that will be used for an XHR API call?

A

We set the url string equal to a variable

const url = “http://www.api-to-call.com/endpoint”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do we indicate the response type we expect from an XHR API request?

A

xhr.responseType = ‘json’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How do we indicate what needs to be done when an XHR API call is finished?

A

We write a function that monitors the readystate of the XHR API call and include a conditional statement within that function to run code on a state of DONE.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does the readystate function look like for an XHR API call?

A

xhr.onreadystatechange = ( ) => {

if(xhr.readyState === XMLHttpRequest.DONE){

return xhr.response (or other code)

}

{

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do we access the response of an XHR API call?

A

We can return the xhr.response from the XHR API call within the xhr.onreadystatechange function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

After we have written our xhr code to send a XHR API call, how do we initiate the call?

A

xhr. open(‘GET’, url) = a GET request to the const url
xhr. send( ) = to send the request

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

When do we use JSON.stringify?

A

We use JSON.stringify to convert data to a JSON string so that it can be sent to a server or database.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How do we typically convert data to a JSON format to send to a server or database?

A

We can use the JSON.stringify( ) to turn our data into a JSON string.

const dataToSend = JSON.stringify({data: ‘value’});

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

When making an xhr ‘POST’ request, what is the primary difference in code from a ‘GET’ request?

A

There are three primary differences:

  1. We include data that must be converted to a type accepted by the server or database - JSON is often the type, so a JSON.stringify is needed
  2. The xhr.open( ) command contains ‘POST’ instead of ‘Get’ as the first parameter.
  3. The xhr.send( ) command now includes our converted data as a parameter, ‘GET’ requests do not include a parameter in the send method.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Can POST requests also request information?

A

Yes, a POST request can both introduce and request information from another source

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is one of the reasons that promises were introduced in ES6?

A

Promise were introduced to make asynchronous event handling easier.

17
Q

What keyword do we use to simplify asynchronous requests using promises?

A

We use the fetch( ) keyword (along with asycn … await)

18
Q

When will a fetch request reject?

A

A fetch request will only reject on a network error. It will not reject on an HTML error (‘404’, etc).

19
Q

What do we need to do with a fetch request being aware that it will not reject on an HTML error?

A

We need to check the response from the endpoint with a .then( ) statement which looks at the response.ok or response.status value.

20
Q

When using fetch as a ‘GET’ request, what do we include as a parameter?

A

We include the endpoint for our request

fetch(‘https://api-to-call.com/endpoint’)

21
Q

After writing our fetch request, what do we need to chain on to continue with our request functionality?

A

We need to chain on a .then( ) to:

  1. check the response with a conditional
  2. return a successful response if received
  3. throw a new Error if !response.ok
  4. handle an error if received.
22
Q

What does the first .then( ) look like for a fetch ‘GET’ request?

A

.then(response => {

if(response.ok){return response.json( ) }

throw new Error(‘Network Error’)},

networkError =>{console.log(networkError.message)} );

23
Q

What is a more modern way to asynchronously request information from or to send information to a website or database?

A

Using async and await keywords, along with the try catch keywords is the more modern way of asynchronously interacting with websites or databases

24
Q

What does a boilerplate GET request look like using async await keywords?

A
  1. We write a function using the async keyword - this can be an anonymous function
  2. Within this function, we use the keyword try to attempt to get data from another source
  3. We create a response variable equal to our await fetch command
  4. We write a conditional to see if the response is ok
  5. Within the conditional, if the response is ok, we await the response.json() and do something with this data
  6. Outside the conditional, we throw a new Error (since the response was not ok)
  7. Now, outside out try statement, we use the catch keyword to catch the error and do something with it
25
Q

What does the keyword fetch do for us?

A

It is the newer keyword for using a promise in an asynchronous operation, it returns a promise

26
Q

Compared with a ‘GET’ request, what is different in regards to an async await ‘POST’ request?

A

In our ‘POST’ request we often add information to the await fetch command. This information can contain:

  1. The method, which is equal to ‘POST’
  2. Information needed by the API, such as body information, headers, etc

Otherwise the code looks very similar to a ‘GET’ async await request

27
Q

Where can the await keyword be used in JavaScript?

A

The await keyword can only be used within a function declared with the async keyword

28
Q

What does the await keyword do for us in JavaScript?

A

It allows us to indicate that the program should continue moving through its message queue while a promise resolves.

29
Q

What is the async keyword used for in JavaScript?

A

The async keyword is used to create functions that will return promises.