Hi, and welcome to this tutorial on asynchronous programming in JavaScript.
Today we'll be discussing two important
concepts in JavaScript promises and the async keyword.
First, let's talk about promises.
A promise is an object that represents
the eventual completion or failure of an Asynchronous operation.
In other words, a promise can be used to handle the results of an Asynchronous
operation, such as a network request or a file read operation.
Promises have three possible states pending, fulfilled, and rejected.
When a promise is created, it starts in a pending state.
If the Asynchronous operation succeeds,
the promise will be fulfilled, and if it fails, the promise will be rejected.
Promises provide a way to handle
Asynchronous results in a more manageable and predictable manner.
Instead of relying on callbacks, which can get complex quickly when dealing
with multiple Asynchronous operations, you can use promises to handle the results
of Asynchronous operations in a cleaner and more structured way.
Now let's take a look at example of how to use promises.
With a public API of GitHub.
We're going to be fetching a username and we're going to use promises with that.
So let's create a function called getUser, which is going to take in a username,
and then it's going to be fetching this username from GitHub API URL for GitHub
would be httpsapi GitHub.com users, and then we're just going to give it
the username that we passed in as a parameter.
And we're actually going to have to modify this to be like this.
And then what we could do is return a fetch that is going to take
in the API URL, and then once it completes,
it should give us a value back and we can just return the response in.
JSON value and then we can extract information from it later on.
What we could do for this is get user, let's say OpenAI and then
get the value it responds with and console log this value here.
Great.
Now let's save this and let's run this project
and we're going to be seeing all the information about OpenAI.
Next, let's talk about the Async keyword.
The Async keyword is used to create Asynchronous functions in JavaScript.
And when you declare a function
with the Async keyword, you can use the await keyword inside
the function to wait for the results of an Asynchronous operation.
So here's the same example with the Async keyword.
Let's comment this out and let's do
const get user async username, and then we want the content
for the API URL, and then we can say response await
fetch API URL, and then we can use this
response to get the data in a JSON format.
And now let's call this get user function and let's say getuser OpenAI,
then value, and then let's console log this value return data.
Okay, let's run this and we see the same response that was
generated before when we were just using the fetch API without the await keyword.
Now let's create one more usage
of the same function using the promises, the actual promise keyword.
So let's do something like this const get
GitHub user it's going to take in username and then it's going to return a promise
and it will have two values as mentioned before.
It's going to have resolve and reject.
It's going to take in a function and then it's going to fetch the GitHub user
and then it's going to recreate the response into a JSON object
and then we're going to grab some data from this then data?
And then we're going to be checking if data message equals not found,
then we can reject this call and we can just say user not found.
And else we can just resolve and return the data.
If there are any errors happening with our
call, we can also catch that error and we can just reject with the given error.
Great. So if we want to use this,
we can just call get GitHub user and give it a John Doe for example username
and then we can just see what happens and what our value is going to be.
And if there are any errors,
we can catch it and we can just console log error, error.
Great.
So in this version, the get GitHub user function returns a new
promise object that takes in, resolve and reject callbacks.
The fetch API is used to retrieve the user information from the GitHub API
and the response is then converted to JSON and checked for an error message.
If the error message is found, the promise is rejected with an error message.
Otherwise the promise is resolved with the user data.
So you can experiment with this
and provide different usernames and see how it goes.
Let's run this now and we see that actually this user exists.
But if we were to, for example, provide this user, what would happen?
We're going to get an error and the user is not going to be found.
Here is our message so that's it on asynchronous calls with await keyword,
with async keyword, with the fetch function that uses the then
values or catch values if we want to return information or catch our errors.
And this is the promise as well that we talked about and it can be used to resolve
or reject the values according to the API's response.
Thanks for watching. This is all for JavaScript tutorials
that are going to refresh your knowledge about Java JavaScript so that you're all
set to continue with our react native course.