WEBVTT

1
00:00:00.240 --> 00:00:04.300
Hi, and welcome to this tutorial on
asynchronous programming in JavaScript.

2
00:00:04.320 --> 00:00:06.140
Today we'll be discussing two important

3
00:00:06.170 --> 00:00:09.740
concepts in JavaScript promises
and the async keyword.

4
00:00:09.770 --> 00:00:11.820
First, let's talk about promises.

5
00:00:11.850 --> 00:00:14.010
A promise is an object that represents

6
00:00:14.040 --> 00:00:18.860
the eventual completion or failure
of an Asynchronous operation.

7
00:00:18.880 --> 00:00:23.060
In other words, a promise can be used
to handle the results of an Asynchronous

8
00:00:23.080 --> 00:00:26.900
operation, such as a network
request or a file read operation.

9
00:00:26.920 --> 00:00:31.580
Promises have three possible states
pending, fulfilled, and rejected.

10
00:00:31.600 --> 00:00:34.900
When a promise is created,
it starts in a pending state.

11
00:00:34.930 --> 00:00:37.540
If the Asynchronous operation succeeds,

12
00:00:37.560 --> 00:00:41.300
the promise will be fulfilled, and if
it fails, the promise will be rejected.

13
00:00:41.320 --> 00:00:42.900
Promises provide a way to handle

14
00:00:42.930 --> 00:00:46.660
Asynchronous results in a more
manageable and predictable manner.

15
00:00:46.680 --> 00:00:50.740
Instead of relying on callbacks,
which can get complex quickly when dealing

16
00:00:50.770 --> 00:00:54.940
with multiple Asynchronous operations,
you can use promises to handle the results

17
00:00:54.970 --> 00:00:59.380
of Asynchronous operations
in a cleaner and more structured way.

18
00:00:59.410 --> 00:01:02.500
Now let's take a look at example
of how to use promises.

19
00:01:02.530 --> 00:01:04.980
With a public API of GitHub.

20
00:01:05.010 --> 00:01:09.620
We're going to be fetching a username and
we're going to use promises with that.

21
00:01:09.650 --> 00:01:16.540
So let's create a function called getUser,
which is going to take in a username,

22
00:01:16.570 --> 00:01:25.660
and then it's going to be fetching this
username from GitHub API URL for GitHub

23
00:01:25.690 --> 00:01:33.560
would be httpsapi GitHub.com users,
and then we're just going to give it

24
00:01:33.590 --> 00:01:37.570
the username that we
passed in as a parameter.

25
00:01:37.600 --> 00:01:42.820
And we're actually going to have
to modify this to be like this.

26
00:01:42.850 --> 00:01:47.930
And then what we could do is return
a fetch that is going to take

27
00:01:47.960 --> 00:01:51.930
in the API URL,
and then once it completes,

28
00:01:51.960 --> 00:02:01.180
it should give us a value back
and we can just return the response in.

29
00:02:01.210 --> 00:02:08.580
JSON value and then we can extract
information from it later on.

30
00:02:08.610 --> 00:02:16.380
What we could do for this is get user,
let's say OpenAI and then

31
00:02:16.410 --> 00:02:23.610
get the value it responds
with and console log this value here.

32
00:02:23.640 --> 00:02:24.260
Great.

33
00:02:24.290 --> 00:02:29.780
Now let's save this
and let's run this project

34
00:02:29.810 --> 00:02:34.170
and we're going to be seeing all
the information about OpenAI.

35
00:02:34.200 --> 00:02:37.220
Next, let's talk about the Async keyword.

36
00:02:37.250 --> 00:02:41.540
The Async keyword is used to create
Asynchronous functions in JavaScript.

37
00:02:41.560 --> 00:02:43.100
And when you declare a function

38
00:02:43.130 --> 00:02:46.700
with the Async keyword,
you can use the await keyword inside

39
00:02:46.730 --> 00:02:50.340
the function to wait for the results
of an Asynchronous operation.

40
00:02:50.370 --> 00:02:53.900
So here's the same example
with the Async keyword.

41
00:02:53.930 --> 00:02:58.060
Let's comment this out and let's do

42
00:02:58.090 --> 00:03:05.780
const get user async username,
and then we want the content

43
00:03:05.810 --> 00:03:16.260
for the API URL,
and then we can say response await

44
00:03:16.290 --> 00:03:20.340
fetch API URL, and then we can use this

45
00:03:20.370 --> 00:03:26.940
response to get the data in a JSON format.

46
00:03:26.970 --> 00:03:34.060
And now let's call this get user function
and let's say getuser OpenAI,

47
00:03:34.090 --> 00:03:42.780
then value, and then let's console log
this value return data.

48
00:03:42.810 --> 00:03:50.140
Okay, let's run this
and we see the same response that was

49
00:03:50.170 --> 00:03:57.980
generated before when we were just using
the fetch API without the await keyword.

50
00:03:58.010 --> 00:04:00.140
Now let's create one more usage

51
00:04:00.170 --> 00:04:04.780
of the same function using the promises,
the actual promise keyword.

52
00:04:04.810 --> 00:04:08.180
So let's do something like this const get

53
00:04:08.210 --> 00:04:14.900
GitHub user it's going to take in username
and then it's going to return a promise

54
00:04:14.930 --> 00:04:18.380
and it will have two values
as mentioned before.

55
00:04:18.410 --> 00:04:22.500
It's going to have resolve and reject.

56
00:04:22.530 --> 00:04:30.040
It's going to take in a function and then
it's going to fetch the GitHub user

57
00:04:32.440 --> 00:04:39.640
and then it's going to recreate
the response into a JSON object

58
00:04:41.920 --> 00:04:50.820
and then we're going to grab
some data from this then data?

59
00:04:50.840 --> 00:04:57.940
And then we're going to be checking if
data message equals not found,

60
00:04:57.970 --> 00:05:04.340
then we can reject this call and we
can just say user not found.

61
00:05:04.360 --> 00:05:10.640
And else we can just resolve
and return the data.

62
00:05:10.840 --> 00:05:13.740
If there are any errors happening with our

63
00:05:13.770 --> 00:05:22.420
call, we can also catch that error and we
can just reject with the given error.

64
00:05:22.440 --> 00:05:24.060
Great.
So if we want to use this,

65
00:05:24.090 --> 00:05:31.060
we can just call get GitHub user and give
it a John Doe for example username

66
00:05:31.090 --> 00:05:38.380
and then we can just see what happens
and what our value is going to be.

67
00:05:38.410 --> 00:05:41.300
And if there are any errors,

68
00:05:41.330 --> 00:05:51.540
we can catch it and we can just
console log error, error.

69
00:05:51.560 --> 00:05:52.060
Great.

70
00:05:52.090 --> 00:05:55.460
So in this version,
the get GitHub user function returns a new

71
00:05:55.480 --> 00:05:58.340
promise object that takes in,
resolve and reject callbacks.

72
00:05:58.360 --> 00:06:03.140
The fetch API is used to retrieve the user
information from the GitHub API

73
00:06:03.170 --> 00:06:07.540
and the response is then converted
to JSON and checked for an error message.

74
00:06:07.570 --> 00:06:11.460
If the error message is found, the promise
is rejected with an error message.

75
00:06:11.480 --> 00:06:14.460
Otherwise the promise is
resolved with the user data.

76
00:06:14.480 --> 00:06:16.140
So you can experiment with this

77
00:06:16.170 --> 00:06:19.940
and provide different
usernames and see how it goes.

78
00:06:19.970 --> 00:06:26.460
Let's run this now and we see
that actually this user exists.

79
00:06:26.480 --> 00:06:31.140
But if we were to, for example,
provide this user, what would happen?

80
00:06:31.170 --> 00:06:35.860
We're going to get an error
and the user is not going to be found.

81
00:06:35.890 --> 00:06:40.460
Here is our message so that's it
on asynchronous calls with await keyword,

82
00:06:40.480 --> 00:06:44.940
with async keyword,
with the fetch function that uses the then

83
00:06:44.970 --> 00:06:50.420
values or catch values if we want to
return information or catch our errors.

84
00:06:50.450 --> 00:06:56.660
And this is the promise as well that we
talked about and it can be used to resolve

85
00:06:56.690 --> 00:07:00.900
or reject the values according
to the API's response.

86
00:07:00.920 --> 00:07:04.180
Thanks for watching.
This is all for JavaScript tutorials

87
00:07:04.200 --> 00:07:07.660
that are going to refresh your knowledge
about Java JavaScript so that you're all

88
00:07:07.690 --> 00:07:11.600
set to continue with our
react native course.