Skip to content

Commit 13206ec

Browse files
nasdannasdan
authored
Merge pull request #798 from Lemoncode/feature/update-06-rest-api
Feature/update 06 rest api
2 parents 2596d74 + 0300d3d commit 13206ec

450 files changed

Lines changed: 46376 additions & 39573 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎06-rest-api/00-xml-http-request/00-boilerplate/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<script type="text/javascript" src="index.js"></script>
11+
</body>
12+
</html>

‎06-rest-api/00-xml-http-request/00-boilerplate/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log("XMLHttpRequest Playground");

‎06-rest-api/00-xml-http-request/01-implementation/README.md‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
# 00 XMLHttpRequest
2+
3+
Let's see how to create a request with the `XMLHttpRequest` object:
4+
5+
```js
6+
const xhr = new XMLHttpRequest();
7+
8+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
9+
10+
xhr.send();
11+
```
12+
13+
> In the Network tab of the browser's developer tools, you can see the request and response.
14+
15+
How can I recover the data or see if an error has occurred?
16+
17+
```diff
18+
const xhr = new XMLHttpRequest();
19+
20+
+ xhr.onreadystatechange = function () {
21+
+ console.log(xhr.readyState, xhr.status);
22+
+ };
23+
24+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
25+
26+
xhr.send();
27+
28+
```
29+
30+
> [readyState official docs](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState)
31+
32+
33+
To get the data, we can use, for example, `responseText`:
34+
35+
```diff
36+
const xhr = new XMLHttpRequest();
37+
38+
xhr.onreadystatechange = function () {
39+
- console.log(xhr.readyState, xhr.status);
40+
+ console.log(xhr.readyState, xhr.status, xhr.responseText);
41+
};
42+
43+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
44+
45+
xhr.send();
46+
47+
```
48+
49+
50+
So to know that everything has gone well, we can wait for the `readyState` to be 4 and the `status` to be 2xx
51+
52+
```diff
53+
const xhr = new XMLHttpRequest();
54+
55+
xhr.onreadystatechange = function () {
56+
- console.log(xhr.readyState, xhr.status, xhr.responseText);
57+
+ if (xhr.readyState === 4 && xhr.status === 200) {
58+
+ console.log(xhr.responseText);
59+
+ }
60+
};
61+
62+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
63+
64+
xhr.send();
65+
```
66+
67+
What if we want to keep Antonio's member, which is the first one?
68+
69+
```diff
70+
const xhr = new XMLHttpRequest();
71+
72+
xhr.onreadystatechange = function () {
73+
if (xhr.readyState === 4 && xhr.status === 200) {
74+
- console.log(xhr.responseText);
75+
+ const first = xhr.responseText[0];
76+
+ console.log("first", first);
77+
}
78+
};
79+
80+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
81+
82+
xhr.send();
83+
84+
```
85+
86+
> What do you think? What appears in the console.log of the first?
87+
88+
Why does a bracket appear? Because we are using the `responseText` method, even if we use the default `response`, it will give us the same result:
89+
90+
```diff
91+
const xhr = new XMLHttpRequest();
92+
93+
xhr.onreadystatechange = function () {
94+
if (xhr.readyState === 4 && xhr.status === 200) {
95+
- const first = xhr.responseText[0];
96+
+ const first = xhr.response[0];
97+
console.log("first", first);
98+
}
99+
};
100+
101+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
102+
103+
xhr.send();
104+
```
105+
106+
And this is because the response comes as plain text, so we have to parse it to JSON:
107+
108+
```diff
109+
const xhr = new XMLHttpRequest();
110+
111+
xhr.onreadystatechange = function () {
112+
if (xhr.readyState === 4 && xhr.status === 200) {
113+
- const first = xhr.response[0];
114+
+ const first = JSON.parse(xhr.response)[0];
115+
console.log("first", first);
116+
}
117+
};
118+
119+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
120+
121+
xhr.send();
122+
```
123+
124+
> If you look, there is an `responseXML` but not an `responseJSON` and this is because at that time it was more common to work with data in XML format instead of JSON as now.
125+
126+
One thing to keep in mind in a communication using HTTP, are the headers, specifically the `Content-Type` (in the response, look at the Network tab) that tells us the type of content we are receiving.
127+
128+
But we can decide what type of content we want to receive, for example, if we want to receive a JSON, we can do the following:
129+
130+
```diff
131+
const xhr = new XMLHttpRequest();
132+
133+
xhr.onreadystatechange = function () {
134+
if (xhr.readyState === 4 && xhr.status === 200) {
135+
const first = JSON.parse(xhr.response)[0];
136+
console.log("first", first);
137+
}
138+
};
139+
140+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
141+
142+
+ xhr.setRequestHeader("Accept", "application/json")
143+
144+
xhr.send();
145+
146+
```
147+
148+
> It works exactly the same as before
149+
150+
But what if we want to receive the data in XML format?
151+
152+
```diff
153+
const xhr = new XMLHttpRequest();
154+
155+
xhr.onreadystatechange = function () {
156+
if (xhr.readyState === 4 && xhr.status === 200) {
157+
- const first = JSON.parse(xhr.response)[0];
158+
- console.log("first", first);
159+
+ const result = xhr.response;
160+
+ console.log("result", result);
161+
}
162+
};
163+
164+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
165+
166+
- xhr.setRequestHeader("Accept", "application/json");
167+
+ xhr.setRequestHeader("Accept", "application/xml");
168+
169+
xhr.send();
170+
171+
172+
```
173+
174+
> It gives us an error that this endpoint does not support this format.
175+
>
176+
> It is the responsibility of the backend developer to parse the response in XML format if it receives the Accept header with that format.
177+
178+
To avoid having to repeat so much code every time we want to make a call to any endpoint, this was usually refactored into a function:
179+
180+
```diff
181+
+ const getJSON = (url) => {
182+
const xhr = new XMLHttpRequest();
183+
184+
xhr.onreadystatechange = function () {
185+
if (xhr.readyState === 4 && xhr.status === 200) {
186+
const result = xhr.response;
187+
console.log("result", result);
188+
}
189+
};
190+
191+
xhr.open("GET", "https://api.github.com/orgs/lemoncode/members");
192+
193+
- xhr.setRequestHeader("Accept", "application/xml");
194+
+ xhr.setRequestHeader("Accept", "application/json");
195+
196+
xhr.send();
197+
+ };
198+
199+
+ getJSON("https://api.github.com/orgs/lemoncode/members");
200+
201+
```
202+
203+
> This is becoming more like a fetch
204+
205+
But now, how can I return the data when I receive the response? I need to use a callback (or a promise) like this:
206+
207+
```diff
208+
- const getJSON = (url) => {
209+
+ const getJSON = (url, onSuccess) => {
210+
const xhr = new XMLHttpRequest();
211+
212+
xhr.onreadystatechange = function () {
213+
if (xhr.readyState === 4 && xhr.status === 200) {
214+
- const result = xhr.response;
215+
- console.log("result", result);
216+
+ onSuccess(JSON.parse(xhr.response));
217+
}
218+
};
219+
220+
xhr.open("GET", url);
221+
222+
xhr.setRequestHeader("Accept", "application/json");
223+
224+
xhr.send();
225+
};
226+
227+
- getJSON("https://api.github.com/orgs/lemoncode/members");
228+
+ getJSON("https://api.github.com/orgs/lemoncode/members", (result) => {
229+
+ console.log(result);
230+
+ });
231+
232+
```
233+
234+
But of course, here are a lot of things missing:
235+
236+
- For example, what happens if the call fails (we need an error callback).
237+
- This could be improved and use promises instead of callbacks.
238+
- But even so, what happens if we want to make a call with another method POST, PUT, DELETE, etc.
239+
- What if we want to add several headers.
240+
- Or configure other concepts, such as Cache, CORS, etc.
241+
242+
Here is [another example of XMLHttpRequest](
243+
https://codepen.io/Lemoncode/pen/MWyYbOp?editors=1111) with this more elaborate getJSON:
244+
245+

‎06-rest-api/01-concepts/00-boilerplate/.babelrc‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎06-rest-api/01-concepts/00-boilerplate/.vscode/launch.json‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎06-rest-api/01-concepts/00-boilerplate/.vscode/settings.json‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎06-rest-api/01-concepts/00-boilerplate/config/webpack/base.js‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎06-rest-api/01-concepts/00-boilerplate/config/webpack/dev.js‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

0 commit comments

Comments
 (0)