Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- javascript [2022-06-23 18:41:03] – david
+++ javascript [2023-01-18 15:43:23] (aktuell) – [test api] david
@@ Zeile 57: / Zeile 57: @@
 </code>
-===== fetch (AJAX/AJAJ) =====
+===== AJAX/AJAJ (fetch) =====
+  * __AJAX__ steht für //Asynchronous JavaScript and XML//. Man spricht heutzutage zwar immer noch oft von AJAX und nicht von AJAJ, obwohl die meisten APIs mittlerweile das kompaktere und weniger komplexe JSON nutzen.
+  * __fetch__ ist eine moderne Alternative zu __XMLHttpRequest__ (XHR). fetch arbeitet komplett **asynchron** und gibt ein **Promise** zurück, während XHR **synchron** und **asynchron** verwendet werden kann und mit **callbacks** arbeitet.
 <code javascript>
-const response = await fetch("/api", { method: "get" }); // http methods: get/post/put/delete
+const response = await fetch("/api/test", {
-const json = await response.json();
+    method: "get",
+    headers: {
+      "Content-Type": "application/json"
+    }
+});
 console.info(`status: ${response.status}`);
-console.info(json);
+let json;
+try {
+    json = await response.json();
+} catch (e) {
+    console.error(e);
+    json = JSON.stringify({});
+} finally {
+    console.info(json);
+}
 </code>
 ===== Beispielprogramme =====
+==== backend ====
+=== test api ===
+API zum testen: Alle Anfragen werden geloggt und mit "Hello World!" und dem Status Code 418 (I'm a teapot) beantwortet.
+<code javascript test.js>
+"use strict";
+import express from "express";
+const app = express();
+const port = process.env.PORT || 3000;
+app.use(express.json());
+app.use((req, res, next) => {
+    const payload = {
+        body: req.body ?? null,
+        headers: req.headers ?? null,
+        url: req.url ?? null,
+    };
+    console.log(payload);
+    res.status(418);
+    res.send("Hello World!");
+    next();
+});
+app.listen(port);
+console.info(`Express started on port ${port}`);
+</code>
+<code json package.json>
+{
+  "name": "test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "test.js",
+  "dependencies": {
+    "express": "^4.18.2"
+  },
+}
+</code>
+=== hello world webserver (deno) ===
+<code javascript hello-world.ts>
+import { serve } from "https://deno.land/std@0.126.0/http/server.ts";
+const port = 80;
+const handler = (): Response => {
+    return new Response("Hello World!");
+};
+serve(handler, { port });
+console.log(`Listening on http://localhost:${port}`);
+</code>
@@ Zeile 152: / Zeile 232: @@
     }
 });
-</code>
-==== backend ====
-=== hello world webserver (deno) ===
-<code javascript hello-world.ts>
-import { serve } from "https://deno.land/std@0.126.0/http/server.ts";
-const port = 80;
-const handler = (): Response => {
-    return new Response("Hello World!");
-};
-serve(handler, { port });
-console.log(`Listening on http://localhost:${port}`);
 </code>