AsyncJS, HTTP requests, AJAX Flashcards
What is the call stack?
Callstack is a mechanism the JS interpreter uses to keep track of its place in a script that calls multiple functions.
This is how JS knows what function is ucrrently being run and what functions are called from within that function.
What does it mean that JS is Single Threaded?
It means, that at any given point in time JS is running at most one line of JS code.
How do asynchronous callbacks work?
JavaScript is SingleThreaded, however the browsers are written in different languages (usually C++)/
Browsers come with WEB APIs that are able to handle certain tasks in the background.
The JS call stack recognizes these WEB API functions and passes them off to the browser to take care of.
Once the browser finishes those asks, they return and are pushed onto the stack as a callback.
What are promises?
Promise is an object representing the eventual completion or failure of an asynchronous operation.
Usually a promise has to be resolved or rejected.
You declare a promise with new keyword.
const willGetYouADog = new Promise((resolve,reject)=>{
if () resolve()
else reject()
}
You can use then and catch methods to handle promises. The then method is executed immediately after your promise is fulfilled with resolve. catch is the method used when your promise has been rejected. It is executed immediately after a promise’s reject method is called.
What is the pattern to make promises?
It is usual to create a function that returns a promise, instead of creating a promise and saving it to a variable.
This pattern is especially useful, when we are trying to chain promises to go further in the data structure that we are browsing and try to extract this data.
Whats an XMLHttpRequest?
Is the ‘original’ way of sending requests via JS (at that time xml was go too). We can use XHR to fetch any sort of data from an API.
- Does not support promises (lots of callbacks if there are many nested requests)
What is the method to parse JSON file to JS object?
JSON.parse(data);
What is Fetch API
IT’s the newer way of making requests via JS.
It supports promises.
fetch() requires one argument (the URL to the API) You get in return the response object, the content of that response object is included as a ReadableStream (a stream is a way of accessing data, that can be super large)
What’s async keyword?
Async & await keywords are syntatical sugar for promises.
Async functions always return a promise.
If the function returns a value, the promise will be resolved with that value.
If the function throws an exepction the promise will be rejected.
We use async keyword to declare an async fucntion or async function expression.
const getPeople = async () => {
}
What’s the purpose of await functions?
We put the await keyword inside of an async function and it will pause the execution of the function while it waits for the promise to be resolved.
const response = await fetch('https://swapi.dev/api/people/')
await keyword stops javascript from assigning the value to the variable until the Promise is resolved.
How do you make requests with HTML forms?
When it comes to sending form data with http requests, we can either
1) use built in html forms
2) send calls directly to the api with fetch (or some ajax library)
In order to send our form data automatically
i) we need to specify that endpoint with action attribute
like: action=’/submit-user-data’
ii) specify the HTTP method
iii) specify the names of the inputs, because, they will be used to identify the data.
iv) on the server side, we need to setup a new route, strictly for updating data, and update it using our mongoose.Schema, for that we need to use in our app.use(express.urlencoded()) (in order to have access to req.body)
