Asynchronous code Flashcards
What are asynchronous functions?
Functions that can happen in the background while rest of your code executes
What kind of trouble can we run with this piece of code?
const getData = function() {
// go fetch data from some API…
// clean it up a bit and return it as an object:
return data
}
const myData = getData()
const pieceOfData = myData[‘whatever’]
when we try to extract pieceOfData out of the returned data, the function getData() will most likely still be fetching, so myData will not be the expected data, but will be undefined. Sad.
What can solve the problem, where we need to tell our code to wait until the data is done fetching to continue?
Promises
const myData = getData() // if this is refactored to return a Promise…
myData.then(function(data){ // .then() tells it to wait until the promise is resolved
const pieceOfData = data[‘whatever’] // and THEN run the function inside
})
JS is a single-threaded language. What does it mean?
It means that JS has only call stack that is used to execute the program
What is event loop’s job?
Event loop job is to look at the call stack and look at the task queue. If the stack is empty, it takes the first think from the task queue and pushes it into the stack
What is an API?
API (application programming interface) is a software intermediary that allows two applications to talk with each other.
Imagine a waiter who is between the customer and the chef.
How is access to an API restricted?
You have to request an API key which is unique to you. For that you need to make an account.
Services can correlate your API key to your requests of their data, including how much and how often you are requesting it.
How do you fetch and extract data from an API?
You can do that using promises. At first you’ll use fetch(), after that with .then() function
How do you fetch and extract data from an API?
You can do that using promises. At first you’ll use fetch(), after that with .then() function
an example:
fetch(‘https://api.giphy.com/v1/gifs/translate?api_key=YOUR_KEY_HERE&s=cats’, {mode: ‘cors’})
.then(function(response) {
return response.json();
})
.then(function(response) {
console.log(response);
});
Why might your API request be blocked by the browser, and how might you fix this?
For security reasons, by default, browsers restrict HTTP requests to outside sources (which is exactly what we’re trying to do here). With fetch, you are able to easily supply a JavaScript object for options. It comes right after the URL as a second parameter to the fetch function:
fetch(‘url.url.com/api’, {
mode: ‘cors’
});
What does the async keyword do?
It lets the JS engine know that you are declaring an asynchronous function. This is required if you want to use await inside any function
When function is declared as async, it automatically returns a promise
What does the await keyword do?
It tells JavaScript to wait for an asynchronous action to finish before continuing with the function. It’s like a “pause until done” keyword
The await keyword is used to get a value from a function where you would normally use .then(). Instead of calling .then() after the asynchronous function, you would simply assign a variable to the result using await.
Functions always returns a promise
How to handle errors with async keyword?
You can simply call a function and add .catch() method to the end.
But if you want to handle errors directly in the async functions, you can use try/catch methods.
What is a Promise?
Promise is an object that might produce a value sometime in the future
