feat: add tutorial of XMLHttpRequest and fetch

Author: MikhailMasny

index.html

@@ -24,5 +24,7 @@
     <!-- <script src="src/arrays-methods.js"></script> -->
     <!-- <script src="src/map-weekmap.js"></script> -->
     <!-- <script src="src/set-weekset.js"></script> -->
+    <!-- <script src="src/request.js"></script> -->
+    <!-- <script src="src/fetch.js"></script> -->
 </body>
 </html>

src/fetch.js

@@ -0,0 +1,31 @@
+const requestURL = "http://jsonplaceholder.typicode.com/users";
+
+function sendRequest(method, url, body = null) {
+    return fetch(url, {
+        method: method,
+        body: JSON.stringify(body),
+        headers: { "Content-Type": "application/json" }
+    }).then(response => {
+        if (response.ok) {
+            return response.json();
+        }
+
+        return response.json().then(error => {
+            const someError = new Error("Some error..");
+            someError.data = error;
+        });
+    });
+}
+
+// sendRequest("GET", requestURL)
+//     .then(data => console.log(data))
+//     .catch(error => console.error(error));
+
+const someObject = {
+    prop1: "One",
+    prop2: 1
+}
+
+sendRequest("POST", requestURL, someObject)
+    .then(data => console.log(data))
+    .catch(error => console.error(error))

src/request.js

@@ -0,0 +1,47 @@
+const requestURL = "http://jsonplaceholder.typicode.com/users";
+
+// This is classic XMLHttpRequest.
+const xhr = new XMLHttpRequest();
+xhr.open("GET", requestURL);
+// xhr.responseType = "json"; // Use it if need JSON response.
+xhr.onload = () => {
+    if (xhr.status >= 400) {
+        console.error(xhr.response);
+    } else {
+        console.log(JSON.parse(xhr.response));
+    }
+}
+xhr.onerror = () => console.error();
+xhr.send();
+
+// This is XMLHttpRequest with Promise.
+function sendRequest(method, url, body = null) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open(method, url);
+        xhr.responseType = "json"; // Use it if need JSON response.
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.onload = () => {
+            if (xhr.status >= 400) {
+                reject(console.error(xhr.response));
+            } else {
+                resolve(console.log(xhr.response));
+            }
+        }
+        xhr.onerror = () => console.error();
+        xhr.send(JSON.stringify(body));
+    })
+}
+
+sendRequest("GET", requestURL)
+    .then(data => console.log(data))
+    .catch(error => console.error(error));
+
+const someObject = {
+    prop1: "One",
+    prop2: 1
+}
+
+sendRequest("POST", requestURL, someObject)
+    .then(data => console.log(data))
+    .catch(error => console.error(error))