1
00:00:01,344 --> 00:00:03,574
We've been using async/await in a way that

2
00:00:03,574 --> 00:00:05,643
makes sure to call asynchronous functions

3
00:00:05,643 --> 00:00:08,626
in a truly sequential fashion, and

4
00:00:08,626 --> 00:00:10,835
sometimes, that's exactly what you want,

5
00:00:10,835 --> 00:00:12,927
but other times you don't want the

6
00:00:12,927 --> 00:00:16,074
functions to depend on other functions,

7
00:00:16,074 --> 00:00:18,259
and don't worry though, you can still use

8
00:00:18,259 --> 00:00:21,928
async/await for that situation. Go back

9
00:00:21,928 --> 00:00:24,471
into your iterating file. This time make

10
00:00:24,471 --> 00:00:27,057
the concurrent function async, and next,

11
00:00:27,057 --> 00:00:31,597
let's add a call to our orderStatuses API.

12
00:00:31,597 --> 00:00:36,522
Remember, this endpoint takes one and a

13
00:00:36,522 --> 00:00:39,922
half seconds. Notice that this function is

14
00:00:39,922 --> 00:00:42,896
not awaited, instead, the return value, a

15
00:00:42,896 --> 00:00:46,663
promise, is assigned to a variable named

16
00:00:46,663 --> 00:00:48,689
orderStatus. Next, let's add a second

17
00:00:48,689 --> 00:00:53,584
function call, this time to get the

18
00:00:53,584 --> 00:00:56,457
orders. Again, this function is not

19
00:00:56,457 --> 00:01:00,105
awaited. Next, let's set the text to be an

20
00:01:00,105 --> 00:01:02,393
empty string. This lets us clear the text

21
00:01:02,393 --> 00:01:05,854
so that we can see the data when it comes

22
00:01:05,854 --> 00:01:08,818
back. Keep in mind that axios.get is still

23
00:01:08,818 --> 00:01:11,929
a promise, and promises are eager, as we

24
00:01:11,929 --> 00:01:14,034
talked about at the beginning of the

25
00:01:14,034 --> 00:01:15,790
course. That means that the request has

26
00:01:15,790 --> 00:01:18,879
already been kicked off. Next, let's await

27
00:01:18,879 --> 00:01:25,952
our two functions, and then after those

28
00:01:25,952 --> 00:01:29,654
two statements are awaited, we append our

29
00:01:29,654 --> 00:01:31,808
data to our response text so that we can

30
00:01:31,808 --> 00:01:36,208
see both results. Heading back to the

31
00:01:36,208 --> 00:01:38,310
browser, make sure to reload the page, and

32
00:01:38,310 --> 00:01:40,836
then click on the concurrent button. After

33
00:01:40,836 --> 00:01:44,028
a brief pause, you'll see the data all

34
00:01:44,028 --> 00:01:46,304
appear at once. Before returning to the

35
00:01:46,304 --> 00:01:48,979
code, take a look at the console and see

36
00:01:48,979 --> 00:01:51,564
that the orders API call resolved first,

37
00:01:51,564 --> 00:01:55,112
and that the orderStatuses call resolved

38
00:01:55,112 --> 00:01:57,699
second. By not placing an await on our

39
00:01:57,699 --> 00:02:00,504
Axios functions, we allowed both API calls

40
00:02:00,504 --> 00:02:03,879
to kick off at one time. Returning to the

41
00:02:03,879 --> 00:02:06,595
code, take a look at the await statements.

42
00:02:06,595 --> 00:02:09,161
We're awaiting the orderStatus first,

43
00:02:09,161 --> 00:02:12,080
which means we won't do anything with our

44
00:02:12,080 --> 00:02:15,308
orders data until after we get the data

45
00:02:15,308 --> 00:02:18,133
for our orderStatuses data. But because

46
00:02:18,133 --> 00:02:21,197
orderStatuses is slower, by the time the

47
00:02:21,197 --> 00:02:24,305
await is complete, the request for orders

48
00:02:24,305 --> 00:02:26,647
is already complete, so both calls were

49
00:02:26,647 --> 00:02:28,855
running at the same time, even if we did

50
00:02:28,855 --> 00:02:31,930
tell the code to wait on the slower

51
00:02:31,930 --> 00:02:34,116
request first. There's one more

52
00:02:34,116 --> 00:02:36,087
possibility for these calls. What if we

53
00:02:36,087 --> 00:02:37,643
wanted to handle the same two calls, but

54
00:02:37,643 --> 00:02:39,990
show the data in the order that it comes

55
00:02:39,990 --> 00:02:45,000
back? In the next clip, you'll see how to handle that exact case.

