mode 6 JS IV

Question 1

What is AJAX?

Answer 1

-Asynchronous JavaScript and XML

Ajax describes the process of exchanging data from a web server asynchronously with the help of XML, HTML, CSS, and JavaScript. It just loads the data from the server and selectively updates some webpage parts without refreshing the page.

-It's a series of steps that will allow JS to perform tasks asynchronously
(btw, we'll be using JSON)

Question 2

What is asynchronous?

Answer 2

• it means “non blocking”
  
  • a task that can be performed concurrently with other tasks
  • it won’t stop other threads from functioning at their own pace

Question 3

What are the steps to make an XMLHttp AJAX request?

Answer 3

We’re going to be using the XMLHttpRequest object (aka xhttp) to peform an AJAX request

STEP 1: create XMLHttpRequest Object this object allows us to make requests and get back data (response) in short, this is our data retriever object (it calls servers/apis)
STEP 2: create the callback function for readyState changes
STEP 3: create and open a connection - xhttp.open(httpMethod, url); OR
xhttp.open(httpMethod, url, boolean async?);
STEP 4: send the request
xhttp.send();

Question 4

What are the readystates of XML HttpRequest object?

Answer 4

state 0: not initialized
state 1: server connection established
state 2: request received
state 3: processing request
state 4: complete, request finished and response is ready

Question 5

What are the 3 different ways to perform an AJAXrequest?

Answer 5

• XHTTP/XMLHttpRequest object
• Fetch
• Async-await

Question 6

How can we turn a JSON string into a usable JavaScript object and vice versa?

Answer 6

JSON.parse() turns a JSON string into a usable JavaScript object

• let poke = JSON.parse(xhttp.responseText);
• console.log(poke);

There is also a JSON.stringify to turn a JavaScript object into a JSON

Question 7

What is a promise in JS?

Answer 7

A promise is an asynchronous process that will wait for a response of some secondary process,
then trigger a “success” logic if the secondary process returned correctly OR it will trigger
a “failure” logic if the secondary process return incorrectly

Question 8

Example of Promise

Answer 8

let mySecondaryProcessReturnBoolean = true;
let myGlobalState =25;

let myCustomPromise = new Promise(
    function (resolvingCallback, rejectingCallback){

    //the logic inside of this function will be your "secondary process'"

    if(mySecondaryProcessReturnBoolean){
        resolvingCallback("process RESOLVED!!!");
    }else{
        rejectingCallback("process FAILED!!!");
    }
} );

Question 9

How do we activate a promise?

Answer 9

The “.then()” function triggers the promise’s functionality

// myCustomPromise.then(myResolver, myRejection);
// myCustomPromise.then(myResolverTWO, myRejection);

or use a .catch() function to declare your rejection logic

myCustomPromise
//     .then(myResolver)
//     .catch(myRejection)
//     .finally(()=>{console.log("in the finally block")});

note: myResolver is my success function and myRejection is my failure callback function to be defined elsewhere.

Question 10

Can we chain promises?

Answer 10

Yes we can because a promise….returns another promise

Question 11

What is the Fetch

Answer 11

The Fetch API is a way to perform an AJAX request. It is an abstraction of XHttp Request

Question 12

How do we use the Fetch API to perform an AJAX request?

Answer 12

fetch(`https://pokeapi.co/api/v2/pokemon/${pokeId}`)
    .then(
        function(daResponse){
            //this is a resolving function

        const convertedResponse = daResponse.json();

        // console.log("in the first .then()\t\t\t", convertedResponse);
        return convertedResponse;
    }
)
.then(
    function(daSecondResponse){
        //this is another resolving function
        console.log(daSecondResponse);
        console.log("Fetch is a thing; Gretchen was right.");
        ourDOMManipulation(daSecondResponse);
    }
)
.catch(
    (stuff)=> {console.log("this sucker exploded");}
)

}

Question 13

What is the ASYNC FUNCTION

Answer 13

It is is a way to perform an AJAX request. It is an abstraction of XHttp Request

“await” is used in front of a promise, and will pause THIS line of logic, until the promise
has returned. In fact, hover over “fetch” in VS code to see the return type of fetch is a promise

    Btw, you CAN use the .catch() on the await fetch()