|
1 | | -/* To show that data fetching is happening asynchronously (in the background), but not on initial page refresh */ |
2 | | - |
3 | | -/* |
4 | | -- JSON is the string format will "GET" from server or sent from browser "POST" |
5 | | -- Since it is string we will need to "parse" when we get or "stringify" when sent to server |
6 | | - */ |
| 1 | +// Fetch built-in |
| 2 | +// promised based |
| 3 | +// XHR is not wrong, you can complete all our upcoming examples and projects using XHR. Fetch is just alternative approach that has simpler and cleaner syntax. The end result is the same.Still get dynamically, behind the scenes. |
7 | 4 |
|
8 | 5 | const url = "./api/people.json"; |
9 | 6 |
|
10 | | -const btn = document.querySelector(".btn"); |
11 | | -btn.addEventListener("click", () => { |
12 | | - getData(url); |
13 | | -}); |
14 | | - |
15 | | -function getData(url) { |
16 | | - const xhr = new XMLHttpRequest(); |
17 | | - |
18 | | - xhr.open("GET", url); |
19 | | - |
20 | | - /* It gets fired when since ready state changes from 0 to 1 when used open() method */ |
21 | | - xhr.onreadystatechange = function () { |
22 | | - // console.log(xhr); |
23 | | - if (xhr.readyState === 4 && xhr.status === 200) { |
24 | | - console.log(xhr.responseText); |
25 | | - |
26 | | - const data = JSON.parse(xhr.responseText); |
27 | | - console.log(data); |
28 | | - |
29 | | - const displayPeople = data |
30 | | - .map((person) => { |
31 | | - return `<p>${person.name}</p>`; |
32 | | - }) |
33 | | - .join(""); |
34 | | - |
35 | | - const element = document.createElement("div"); |
36 | | - element.innerHTML = displayPeople; |
37 | | - document.body.appendChild(element); |
38 | | - } else { |
39 | | - console.log({ |
40 | | - status: xhr.status, |
41 | | - statusText: xhr.statusText, |
42 | | - state: xhr.readyState, |
43 | | - }); |
44 | | - } |
45 | | - }; |
46 | | - |
47 | | - /* It sends the request to server, then it displays on the browser */ |
48 | | - xhr.send(); |
49 | | -} |
50 | | - |
51 | | -// It executes first, since the above functionality works asynchronously by browser, only when JavaScript is free then it takes the data from browser |
52 | | -// console.log("hello world"); |
| 7 | +/* Returns Promise and the resolve is "response"*/ |
| 8 | +// const response = fetch(url); |
| 9 | +// console.log(response); |
| 10 | + |
| 11 | +// fetch(url) |
| 12 | +// .then((response) => { |
| 13 | +// // Response Object |
| 14 | +// // Useful methods and properties |
| 15 | +// // Convert response into JSON data |
| 16 | +// // Returns Promise |
| 17 | + |
| 18 | +// console.log(response); |
| 19 | +// return response.json(); |
| 20 | +// }) |
| 21 | +// .then((data) => console.log(data)) |
| 22 | +// .catch((error) => console.log(error)); |
| 23 | + |
| 24 | +/* Using Implicit Return */ |
| 25 | +fetch(url) |
| 26 | + .then((response) => response.json()) |
| 27 | + .then((data) => console.log(data)) |
| 28 | + .catch((error) => console.log(error)); |
0 commit comments