-
Notifications
You must be signed in to change notification settings - Fork 1
/
Fetch_API.html
92 lines (89 loc) · 3.45 KB
/
Fetch_API.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<style>
#products li {
display: inline-block;
width: 20%;
text-align: center;
}
.productImg{
max-width: 100%;
height: 100px;
}
.error{
color: red;
}
</style>
</head>
<body>
<h2>Javascript Fetch API</h2>
<pre>
So first we are calling the Fetch API and passing it the URL we defined as a constant above and since no more parameters are set this is a simple GET request.
Then we get a response but the response we get is not JSON but an object with a series of methods we can use depending on what we want to do with the information, these methods include:
clone() - As the method implies this method creates a clone of the response.
redirect() - This method creates a new response but with a different URL.
arrayBuffer() - In here we return a promise that resolves with an ArrayBuffer.
formData() - Also returns a promise but one that resolves with FormData object.
blob() - This is one resolves with a Blob.
text() - In this case it resolves with a string.
json() - Lastly we have the method to that resolves the promise with JSON.
</pre>
<a href="https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data">
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data
</a>
<ul id="products"></ul>
<script>
function createNode(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
function errorDiv(error) {
let p = createNode('p');
p.setAttribute("class", "error");
p.innerHTML = error;
append(document.body, p);
}
/*
The fetch() method takes one mandatory argument, the path to the resource you want to fetch.
It returns a Promise that resolves to the Response to that request, whether it is successful or not.
*/
const theUrl = 'https://raw.githubusercontent.com/dotnet-presentations/ContosoCrafts/master/src/wwwroot/data/products.json';
const ul = document.getElementById('products');
fetch(theUrl) // Call the fetch function passing the url of the API as a parameter
.then((response) => {
console.log(response.status); // Will show you the status
if (response.ok) {
return response.json();
} else {
errorDiv(response.status);
throw new Error("HTTP status " + response.status);
}
}) // Transform the data into json
.then(function(data) { // Call the fetch function passing the url of the API as a parameter
let products = data;
console.log(products);
return products.map(function(product) { // Map through the results and for each run the code below
let li = createNode('li'),
img = createNode('img'),
h4 = createNode('h4'),
span = createNode('span');
img.src = product.img;
img.setAttribute("class", "productImg");
h4.innerHTML = `${product.Title}`;
span.innerHTML = `${product.Description}`;
append(li, img);
append(li, h4);
append(li, span);
append(ul, li);
})
})
.catch(function(error) { // This is where you run code if the server returns any errors
errorDiv(error);
console.log(error);
});
</script>
</body>
</html>