Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,180 --> 00:00:05,010
Now, when sending HTTP requests,
2
00:00:05,010 --> 00:00:07,330
things can also go wrong, of course.
3
00:00:07,330 --> 00:00:09,360
You can encounter errors,
4
00:00:09,360 --> 00:00:11,240
both technical errors
5
00:00:11,240 --> 00:00:14,890
because, for example, you have no network connection,
6
00:00:14,890 --> 00:00:17,270
or you do have a network connection
7
00:00:17,270 --> 00:00:18,580
and the request is sent
8
00:00:18,580 --> 00:00:21,520
but you get back an error response code,
9
00:00:21,520 --> 00:00:26,520
something like 404 or 500 or 401 codes.
10
00:00:27,130 --> 00:00:29,290
And in case this doesn't tell you much,
11
00:00:29,290 --> 00:00:31,470
attached you find this Wikipedia article
12
00:00:31,470 --> 00:00:34,760
on the response codes which you commonly get
13
00:00:34,760 --> 00:00:38,760
and for example, you will get a 200 or 201 code
14
00:00:38,760 --> 00:00:43,120
or any 200-ish code if you had a successful response.
15
00:00:43,120 --> 00:00:44,340
So you send the request
16
00:00:44,340 --> 00:00:48,340
and the server was able to produce a successful response.
17
00:00:48,340 --> 00:00:49,920
But when sending requests,
18
00:00:49,920 --> 00:00:53,750
you also sometimes get 400 or 500 responses.
19
00:00:53,750 --> 00:00:55,990
Now, for example, if you're sending a request
20
00:00:55,990 --> 00:00:58,100
to a resource which you may not access
21
00:00:58,100 --> 00:00:59,900
because you're not authorized,
22
00:00:59,900 --> 00:01:02,510
something we'll talk about later in the course
23
00:01:02,510 --> 00:01:04,950
when we talk about authentication,
24
00:01:04,950 --> 00:01:08,500
then the request might be sent successfully,
25
00:01:08,500 --> 00:01:10,690
there is no technical problem
26
00:01:10,690 --> 00:01:15,690
but the server replies with a 401 or a 403 response,
27
00:01:16,410 --> 00:01:19,420
making it clear that it got your request
28
00:01:19,420 --> 00:01:23,080
but it doesn't want to give you the response you wanted.
29
00:01:23,080 --> 00:01:27,280
So you then get a successful response technically
30
00:01:27,280 --> 00:01:29,650
but it has an error character
31
00:01:29,650 --> 00:01:32,070
because of this error status code,
32
00:01:32,070 --> 00:01:34,190
which is attached to it.
33
00:01:34,190 --> 00:01:37,460
And you could also be getting a 500-ish response
34
00:01:37,460 --> 00:01:39,850
if there was some server error.
35
00:01:39,850 --> 00:01:41,513
This is how the web works.
36
00:01:42,820 --> 00:01:44,590
Now, I can simulate this here
37
00:01:44,590 --> 00:01:49,590
if I try to send the request to swapi.dev/api/film
38
00:01:50,250 --> 00:01:52,450
instead of films.
39
00:01:52,450 --> 00:01:54,550
This is a invalid URL.
40
00:01:54,550 --> 00:01:59,290
It's a REST endpoint which is not supported by this REST API
41
00:01:59,290 --> 00:02:00,610
and hence, if we save this
42
00:02:00,610 --> 00:02:03,690
and we send the request, we don't get back data.
43
00:02:03,690 --> 00:02:05,680
It's stuck in the loading state,
44
00:02:05,680 --> 00:02:08,270
which of course, is a bad user experience.
45
00:02:08,270 --> 00:02:11,220
It would be better to show the user some error
46
00:02:11,220 --> 00:02:13,550
so that the user of this applications knows
47
00:02:13,550 --> 00:02:15,920
that things went wrong.
48
00:02:15,920 --> 00:02:17,520
Now, if we open the developer tools,
49
00:02:17,520 --> 00:02:19,170
we see an error here.
50
00:02:19,170 --> 00:02:22,320
We got back a 404 response.
51
00:02:22,320 --> 00:02:23,480
That's what I meant.
52
00:02:23,480 --> 00:02:26,980
Technically, it was a successful request.
53
00:02:26,980 --> 00:02:28,610
It left our machine,
54
00:02:28,610 --> 00:02:32,450
was sent to a server and we got back a response
55
00:02:32,450 --> 00:02:35,750
but the response has a 404 status code,
56
00:02:35,750 --> 00:02:39,070
indicating that something's wrong with the response.
57
00:02:39,070 --> 00:02:42,600
In this case, that we requested a resource the server
58
00:02:42,600 --> 00:02:43,993
was not prepared for.
59
00:02:45,280 --> 00:02:48,170
Now, as I said, we wanna handle such errors
60
00:02:48,170 --> 00:02:52,770
and therefore, we might wanna introduce a third state here.
61
00:02:52,770 --> 00:02:56,800
An error state with error and setError.
62
00:02:56,800 --> 00:02:58,400
Now, initially, that might be null
63
00:02:58,400 --> 00:03:01,200
because initially, we have no error.
64
00:03:01,200 --> 00:03:03,940
And whenever fetchMoviesHandler is fired,
65
00:03:03,940 --> 00:03:07,593
we also might wanna reset this error to null.
66
00:03:09,160 --> 00:03:12,770
Like this to make sure that we clear any previous errors
67
00:03:12,770 --> 00:03:13,913
we might have gotten.
68
00:03:14,770 --> 00:03:15,730
But we wanna set it
69
00:03:15,730 --> 00:03:19,700
to something else than null if we do get an error here.
70
00:03:19,700 --> 00:03:22,910
Now, if we're not using async await,
71
00:03:22,910 --> 00:03:26,000
if we work with then and so on,
72
00:03:26,000 --> 00:03:29,670
then we would add catch to catch any errors.
73
00:03:29,670 --> 00:03:31,850
Now, when working with async await,
74
00:03:31,850 --> 00:03:34,230
we instead use try catch.
75
00:03:34,230 --> 00:03:38,350
So we try some code and we catch any potential errors.
76
00:03:38,350 --> 00:03:40,920
So here I wanna grab all of that
77
00:03:42,010 --> 00:03:43,860
and move that into the try block
78
00:03:44,700 --> 00:03:46,770
and then catch any potential errors
79
00:03:46,770 --> 00:03:49,593
that might be caused by the code in the try block.
80
00:03:50,430 --> 00:03:53,190
So now whenever some error is thrown here,
81
00:03:53,190 --> 00:03:55,010
we will catch it.
82
00:03:55,010 --> 00:03:57,200
Now, one problem we'll face here
83
00:03:57,200 --> 00:04:01,520
is that the Fetch API doesn't treat error status codes
84
00:04:01,520 --> 00:04:03,110
as real errors.
85
00:04:03,110 --> 00:04:05,570
It will not throw a technical error
86
00:04:05,570 --> 00:04:08,220
if we get back an error status code.
87
00:04:08,220 --> 00:04:09,640
So the problem we have here
88
00:04:09,640 --> 00:04:11,950
would not result in an error.
89
00:04:11,950 --> 00:04:14,660
We would only get an error in a second step
90
00:04:14,660 --> 00:04:16,750
if we then try to operate on data,
91
00:04:16,750 --> 00:04:18,190
which we haven't gotten.
92
00:04:18,190 --> 00:04:20,360
But that's not how we wanna handle this.
93
00:04:20,360 --> 00:04:21,529
Instead, it would be better
94
00:04:21,529 --> 00:04:23,776
if we would throw a real error
95
00:04:23,776 --> 00:04:27,840
if we got back a response with an unsuccessful status code.
96
00:04:27,840 --> 00:04:30,340
And again, by default, the Fetch API here
97
00:04:30,340 --> 00:04:31,720
doesn't do that.
98
00:04:31,720 --> 00:04:33,380
Axios, on the other hand,
99
00:04:33,380 --> 00:04:35,230
this package I mentioned earlier,
100
00:04:35,230 --> 00:04:37,130
this third-party library,
101
00:04:37,130 --> 00:04:39,380
which you could use for sending requests,
102
00:04:39,380 --> 00:04:42,330
would generate and throw a real error
103
00:04:42,330 --> 00:04:44,534
for error status codes.
104
00:04:44,534 --> 00:04:46,370
Now, since we're not using axios here
105
00:04:46,370 --> 00:04:49,330
but the Fetch API, we have to do this on our own
106
00:04:49,330 --> 00:04:51,440
and it is easy to do that.
107
00:04:51,440 --> 00:04:53,440
I mentioned that the response object,
108
00:04:53,440 --> 00:04:56,440
which we get back has this ok field,
109
00:04:56,440 --> 00:04:58,740
which basically signals whether the response
110
00:04:58,740 --> 00:05:01,040
was successful or not.
111
00:05:01,040 --> 00:05:06,040
So we can check if response is not ok, like this,
112
00:05:06,250 --> 00:05:10,573
and then generate and throw our own error in that case.
113
00:05:11,750 --> 00:05:14,860
So here we can then throw a new Error
114
00:05:15,730 --> 00:05:18,170
with some error message of our choice.
115
00:05:18,170 --> 00:05:19,970
We could read an error message
116
00:05:19,970 --> 00:05:23,380
from the error response we got back from the server
117
00:05:23,380 --> 00:05:25,490
or use our own error message,
118
00:05:25,490 --> 00:05:26,810
which is what I will do.
119
00:05:26,810 --> 00:05:30,020
And I'll just say Something went wrong here.
120
00:05:30,020 --> 00:05:31,840
Now we throw this error
121
00:05:31,840 --> 00:05:34,460
if we have an unsuccessful response.
122
00:05:34,460 --> 00:05:36,630
And since we throw an error here,
123
00:05:36,630 --> 00:05:40,470
we, of course, won't continue with the next step in line.
124
00:05:40,470 --> 00:05:43,330
Instead, we'll make it into this catch block
125
00:05:43,330 --> 00:05:45,740
and here we can now call setError
126
00:05:47,370 --> 00:05:50,500
and set this equal to error.message.
127
00:05:50,500 --> 00:05:52,740
So now Error is a string.
128
00:05:52,740 --> 00:05:56,233
It's this string here in this case to be precise.
129
00:05:58,350 --> 00:06:01,439
And with that, we're managing this error state.
130
00:06:01,439 --> 00:06:05,350
Now we also wanna, of course, output it down there.
131
00:06:05,350 --> 00:06:07,200
We wanna output some content based
132
00:06:07,200 --> 00:06:10,260
on whether we do have an error or not.
133
00:06:10,260 --> 00:06:13,780
So we can again render something conditionally
134
00:06:13,780 --> 00:06:16,488
and we can check if we're not loading,
135
00:06:16,488 --> 00:06:18,680
because, of course, if we are loading,
136
00:06:18,680 --> 00:06:21,100
we wanna wait what the result of that is.
137
00:06:21,100 --> 00:06:22,820
But if we're not loading,
138
00:06:22,820 --> 00:06:24,600
and we do have an error,
139
00:06:24,600 --> 00:06:27,530
so if that is not null or undefined,
140
00:06:27,530 --> 00:06:28,948
but if we do have an error,
141
00:06:28,948 --> 00:06:31,850
then I wanna display this error.
142
00:06:31,850 --> 00:06:34,860
So then I'll render a paragraph
143
00:06:34,860 --> 00:06:38,623
with this error text inside of it, like this.
144
00:06:40,770 --> 00:06:42,420
And I also, of course, wanna make sure
145
00:06:42,420 --> 00:06:44,670
that we always stop loading.
146
00:06:44,670 --> 00:06:48,260
Even if we have an error, we're not loading anymore.
147
00:06:48,260 --> 00:06:51,460
So we also wanna setIsLoading to false here
148
00:06:51,460 --> 00:06:56,110
or we simply move it after this try catch block
149
00:06:56,110 --> 00:06:59,300
so that we always setIsLoading to false
150
00:06:59,300 --> 00:07:01,400
no matter if we have a successful
151
00:07:01,400 --> 00:07:03,360
or an error response
152
00:07:03,360 --> 00:07:05,310
because either way, we're done loading.
153
00:07:06,520 --> 00:07:08,650
And with that, if we save this,
154
00:07:08,650 --> 00:07:09,980
if I click Fetch Movies,
155
00:07:09,980 --> 00:07:14,270
we're loading and then I get some output here.
156
00:07:14,270 --> 00:07:18,160
Found no movies and then my error message here.
157
00:07:18,160 --> 00:07:21,290
Now, that's not the error message I'm setting here
158
00:07:21,290 --> 00:07:24,890
because actually here I'm calling json on the response
159
00:07:24,890 --> 00:07:26,780
and this already fails
160
00:07:26,780 --> 00:07:29,260
because we're not getting back JSON data
161
00:07:29,260 --> 00:07:33,330
for this request for this invalid API endpoint.
162
00:07:33,330 --> 00:07:38,330
So actually I should check for the response being ok
163
00:07:38,340 --> 00:07:42,080
before I even try to parse the response body.
164
00:07:42,080 --> 00:07:45,910
Now, the exact way of handling the error response depends
165
00:07:45,910 --> 00:07:47,930
on the API you're talking to.
166
00:07:47,930 --> 00:07:51,010
Some APIs also send back JSON data
167
00:07:51,010 --> 00:07:53,640
if the request was not successful.
168
00:07:53,640 --> 00:07:57,360
Other APIs like this one send back non-JSON data,
169
00:07:57,360 --> 00:07:59,770
so therefore, here we need to handle this before
170
00:07:59,770 --> 00:08:01,710
we try to parse that.
171
00:08:01,710 --> 00:08:04,350
With that though, if I now click Fetch Movies,
172
00:08:04,350 --> 00:08:06,440
we see something went wrong.
173
00:08:06,440 --> 00:08:08,100
I also see found no movies,
174
00:08:08,100 --> 00:08:10,120
which, of course, is not what I want.
175
00:08:10,120 --> 00:08:13,240
I wanna make sure that we only show this fallback text
176
00:08:13,240 --> 00:08:15,632
if we're not loading, we've got no movies
177
00:08:15,632 --> 00:08:17,620
and we've got no error.
178
00:08:17,620 --> 00:08:20,730
So here I'll check that we have no error
179
00:08:20,730 --> 00:08:22,343
in addition to the other checks.
180
00:08:24,240 --> 00:08:27,430
And with that, if we now try this again,
181
00:08:27,430 --> 00:08:29,330
then we have this state
182
00:08:29,330 --> 00:08:33,342
and if I fix this error by adding the S again here,
183
00:08:34,260 --> 00:08:35,610
and we now save this,
184
00:08:35,610 --> 00:08:38,480
we, of course, can successfully fetch movies again.
185
00:08:38,480 --> 00:08:40,909
And this is how we can handle all the different states
186
00:08:40,909 --> 00:08:44,290
we might have when sending HTTP requests.
187
00:08:44,290 --> 00:08:45,830
And this is important
188
00:08:45,830 --> 00:08:49,060
because no matter to which backend app you're talking,
189
00:08:49,060 --> 00:08:51,413
you will always have these different states.
190
00:08:51,413 --> 00:08:54,350
You will always be waiting for the response,
191
00:08:54,350 --> 00:08:56,650
you might always be getting errors,
192
00:08:56,650 --> 00:08:59,940
you might always be getting back your data hopefully
193
00:08:59,940 --> 00:09:01,920
and your data might always be empty,
194
00:09:01,920 --> 00:09:04,570
at least in most cases it might be empty
195
00:09:04,570 --> 00:09:06,220
and therefore, it's important that you know
196
00:09:06,220 --> 00:09:08,933
how to handle these different scenarios.
197
00:09:10,290 --> 00:09:11,620
Now, of course, instead of writing
198
00:09:11,620 --> 00:09:13,840
all these inline checks here,
199
00:09:13,840 --> 00:09:16,910
we could also write this more elegantly.
200
00:09:16,910 --> 00:09:20,418
We could add a new variable, content,
201
00:09:20,418 --> 00:09:25,418
which by default, let's say is Found no movies.
202
00:09:29,100 --> 00:09:30,590
And then we set it to something else,
203
00:09:30,590 --> 00:09:33,190
depending on which state we have.
204
00:09:33,190 --> 00:09:37,130
So we can check if we're loading, for example,
205
00:09:37,130 --> 00:09:40,760
in which case, we set content equal to Loading
206
00:09:40,760 --> 00:09:43,260
or whatever you wanna display when you're loading.
207
00:09:45,410 --> 00:09:48,010
Now, we can also check, before we check for loading,
208
00:09:48,010 --> 00:09:49,970
because this should override everything,
209
00:09:49,970 --> 00:09:51,700
so I check for it last,
210
00:09:51,700 --> 00:09:52,800
before checking that,
211
00:09:52,800 --> 00:09:55,700
we can check if we have an error.
212
00:09:55,700 --> 00:09:57,973
If that is truth.
213
00:09:58,950 --> 00:10:03,473
In that case, we can set content equal to error.
214
00:10:05,430 --> 00:10:07,630
And of course, we might also have our data.
215
00:10:07,630 --> 00:10:10,320
I mean, hopefully that is what we have in the end.
216
00:10:10,320 --> 00:10:12,100
So we can check for that first.
217
00:10:12,100 --> 00:10:16,340
We can check if movies.length
218
00:10:16,340 --> 00:10:19,130
is greater than zero, in which case,
219
00:10:19,130 --> 00:10:24,113
content should be equal to this MoviesList here.
220
00:10:26,040 --> 00:10:27,313
So let's grab that.
221
00:10:28,220 --> 00:10:30,793
And set content equal to that here.
222
00:10:34,500 --> 00:10:39,210
And now we can replace all that inline output down there
223
00:10:39,210 --> 00:10:43,300
with just rendering content, this content variable.
224
00:10:43,300 --> 00:10:45,580
And the value stored in the content variable
225
00:10:45,580 --> 00:10:48,560
will now differ based on the state we have.
226
00:10:48,560 --> 00:10:50,690
It's either found no movies
227
00:10:50,690 --> 00:10:53,445
or loading or our movies
228
00:10:53,445 --> 00:10:57,233
or again, if I temporarily remove that S here,
229
00:10:59,060 --> 00:11:03,603
like this, then it can also be that error message.
230
00:11:07,150 --> 00:11:08,750
So that's how this works
231
00:11:08,750 --> 00:11:11,423
and that's how we can handle these different states.
17810
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.