Fetch API

HashimThePassionate · HashimThePassionate · commit 21d6c13f5607 · 2024-09-21T06:41:10.000+05:00
diff --git a/15_http_and_forms/02_fetch/data.json b/15_http_and_forms/02_fetch/data.json
@@ -0,0 +1,6 @@
+{
+    "name": "Muhammad Hashim",
+    "age": 24,
+    "email": "hashim@gmail.com",
+    "skills": ["JavaScript", "Python", "Java"]
+}
diff --git a/15_http_and_forms/02_fetch/data.txt b/15_http_and_forms/02_fetch/data.txt
@@ -0,0 +1,2 @@
+This is the content of the file.
+It could be any text, including paragraphs, information, or even code snippets.
diff --git a/15_http_and_forms/02_fetch/index.html b/15_http_and_forms/02_fetch/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fetch API Example</title>
+</head>
+<body>
+    <h2>Fetch Data Example</h2>
+    <p id="status"></p>
+    <p id="content"></p>
+
+    <script>
+        // Asynchronous function to fetch data using async/await
+        async function fetchData() {
+            try {
+                // Make a GET request to fetch the data
+                const response = await fetch('./data.txt');
+                
+                // Check if the response is OK (status code 200-299)
+                if (!response.ok) {
+                    document.getElementById('status').innerText = `Error: ${response.status}`;
+                    return;
+                }
+                
+                // Display status code
+                document.getElementById('status').innerText = `Status: ${response.status}`;
+                
+                // Fetch the content as text
+                const text = await response.text();
+                
+                // Display the content
+                document.getElementById('content').innerText = text;
+            } catch (error) {
+                document.getElementById('status').innerText = `Network error: ${error.message}`;
+            }
+        }
+
+        // Call the function to fetch data
+        fetchData();
+    </script>
+</body>
+</html>
diff --git a/15_http_and_forms/02_fetch/json.html b/15_http_and_forms/02_fetch/json.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fetch JSON Example</title>
+</head>
+<body>
+    <h2>Fetch JSON Example</h2>
+    <pre id="json-content"></pre>
+
+    <script>
+        // Async function to fetch JSON data
+        async function fetchJsonData() {
+            try {
+                const response = await fetch('./data.json');
+                if (!response.ok) {
+                    document.getElementById('json-content').innerText = `Error: ${response.status}`;
+                    return;
+                }
+
+                // Parse the response as JSON
+                const jsonData = await response.json();
+
+                // Format and display the JSON data with indentation
+                document.getElementById('json-content').innerText = JSON.stringify(jsonData, null, 2);
+            } catch (error) {
+                document.getElementById('json-content').innerText = `Network error: ${error.message}`;
+            }
+        }
+
+        // Call the function to fetch JSON data
+        fetchJsonData();
+    </script>
+</body>
+</html>
diff --git a/15_http_and_forms/02_fetch/post.html b/15_http_and_forms/02_fetch/post.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>POST Request Example</title>
+</head>
+<body>
+    <h2>POST Data Example</h2>
+    <p id="post-status"></p>
+
+    <script>
+        // Async function to send a POST request
+        async function postData() {
+            try {
+                const response = await fetch('example/post-endpoint', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': 'Bearer your-token-here'
+                    },
+                    body: JSON.stringify({ name: 'Jane Doe', message: 'Hello World' })
+                });
+
+                if (!response.ok) {
+                    document.getElementById('post-status').innerText = `Error: ${response.status}`;
+                    return;
+                }
+
+                // Display status code if the request was successful
+                document.getElementById('post-status').innerText = `Status: ${response.status}`;
+            } catch (error) {
+                document.getElementById('post-status').innerText = `Network error: ${error.message}`;
+            }
+        }
+
+        // Call the function to send POST request
+        postData();
+    </script>
+</body>
+</html>
diff --git a/15_http_and_forms/02_fetch/readme.md b/15_http_and_forms/02_fetch/readme.md

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +{
 +    "name": "Muhammad Hashim",
 +    "age": 24,
 +    "email": "[email protected]",
 +    "skills": ["JavaScript", "Python", "Java"]
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+This is the content of the file.`
	`2`	`+It could be any text, including paragraphs, information, or even code snippets.`