Fr\u00fcher wurde XMLHttpRequest f\u00fcr API-Anfragen verwendet. Es unterst\u00fctzte keine Promises und erzeugte keinen sauberen JavaScript-Code. Mit jQuery k\u00f6nnen Sie die \u00fcbersichtlichere Syntax `jQuery.ajax()` nutzen.<\/p>\n
JavaScript bietet nun eine eigene, integrierte M\u00f6glichkeit, API-Anfragen zu stellen. Es handelt sich um die Fetch API, einen neuen Standard f\u00fcr Serveranfragen mit Promises, der jedoch zus\u00e4tzliche Funktionen umfasst.<\/p>\n
In diesem Tutorial erstellen Sie sowohl GET- als auch POST-Anfragen mithilfe der Fetch API.<\/p>\n
Eine M\u00f6glichkeit, die Fetch API zu nutzen, besteht darin, die fetch() API-URL als Parameter zu \u00fcbergeben:<\/p>\n
fetch(url)\r\n<\/code><\/pre>\n<\/div>\nDie Methode `fetch()` gibt ein Promise zur\u00fcck. F\u00fcgen Sie nach der Methode `fetch()` die Promise-Methode `then()` ein.<\/p>\n
\nfetch(url)\r\n.then(function() {\r\n\/\/ handle the response\r\n})<\/code><\/pre>\n<\/div>\nWenn das zur\u00fcckgegebene Promise aufgel\u00f6st wird, wird die Funktion innerhalb der `then()`-Methode ausgef\u00fchrt. Diese Funktion enth\u00e4lt Code zur Verarbeitung der von der API empfangenen Daten.<\/p>\n
F\u00fcgen Sie nach der then()-Methode die catch()-Methode ein:<\/p>\n
\nfetch(url)\r\n.then(function() {\r\n\/\/ handle the response\r\n})\r\n.catch(function() {\r\n\/\/ handle the error\r\n});<\/code><\/pre>\n<\/div>\nDie mit `fetch()` aufgerufene API kann fehlerhaft sein oder einen anderen Fehler aufweisen. In diesem Fall wird das abgelehnte Promise zur\u00fcckgegeben. Die `catch`-Methode dient der Behandlung solcher Fehler. Tritt beim Aufruf Ihrer API ein Fehler auf, wird der Code innerhalb von `catch()` ausgef\u00fchrt.<\/p>\n
Nachdem Sie die Syntax f\u00fcr die Verwendung der Fetch API verstanden haben, k\u00f6nnen Sie nun damit beginnen, fetch() auf einer realen API zu verwenden.<\/p>\n
Schritt 2 \u2013 Daten mithilfe von Fetch von einer API abrufen<\/h2>\n
Das folgende Codebeispiel basiert auf der JSONPlaceholder-API. Mithilfe dieser API rufen Sie zehn Benutzer ab und zeigen sie mit JavaScript auf der Seite an. In diesem Tutorial erfahren Sie, wie Sie die Daten von der JSONPlaceholder-API abrufen und in den Listenelementen der Autorenliste anzeigen.<\/p>\n
Erstellen Sie zun\u00e4chst eine HTML-Datei und f\u00fcgen Sie einen Titel sowie eine ungeordnete Liste mit Autoren-IDs hinzu:<\/p>\n
\n<h1>Authors<\/h1>\r\n<ul id=\"authors\"><\/ul><\/code><\/pre>\n<\/div>\nF\u00fcgen Sie am Ende Ihrer HTML-Datei Skript-Tags hinzu und verwenden Sie einen DOM-Selektor, um das ul-Element abzurufen. Verwenden Sie getElementById mit den Autoren als Argument:<\/p>\n
\n<h1>Authors<\/h1>\r\n<ul id=\"authors\"><\/ul>\r\n<script>\r\nconst ul = document.getElementById('authors');\r\n<\/script><\/code><\/pre>\n<\/div>\nDenken Sie daran, die Autoren haben die vorherige ul-ID erstellt.<\/p>\n
Erstellen Sie anschlie\u00dfend eine Liste, die ein DocumentFragment ist:<\/p>\n
\n<script>\r\n\/\/ ...\r\nconst list = document.createDocumentFragment();\r\n<\/script><\/code><\/pre>\n<\/div>\nAlle angeh\u00e4ngten Listenelemente werden der Liste hinzugef\u00fcgt. Ein Dokumentfragment ist nicht Teil der aktiven Dokumentbaumstruktur. Dies hat den Vorteil, dass das Neuzeichnen keine Auswirkungen auf die Leistung hat, wenn sich das Dokumentobjektmodell \u00e4ndert.<\/p>\n
Erstelle eine konstante Variable namens url, die die API-URL enth\u00e4lt, die zehn zuf\u00e4llige Benutzer zur\u00fcckgibt:<\/p>\n
\n<script>\r\n\/\/ ...\r\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\n<\/script><\/code><\/pre>\n<\/div>\nRufen Sie nun mithilfe der Fetch API die JSONPlaceholder API mit fetch() und der URL als Argument auf:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n<\/script><\/code><\/pre>\n<\/div>\nSie rufen die Fetch API auf und \u00fcbergeben die URL an die JSONPlaceholder API. Die Antwort wird empfangen. Diese Antwort ist jedoch kein JSON-Objekt, sondern ein Objekt mit verschiedenen Methoden, die Sie je nach gew\u00fcnschter Weiterverarbeitung der Informationen verwenden k\u00f6nnen. Konvertieren Sie das zur\u00fcckgegebene Objekt mithilfe der Methode `json()` in JSON.<\/p>\n
F\u00fcge eine then()-Methode hinzu, die eine Funktion mit einem Parameter namens response enth\u00e4lt:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {})\r\n<\/script><\/code><\/pre>\n<\/div>\nDer Parameter \u201eresponse\u201c nimmt den von fetch(url) zur\u00fcckgegebenen Objektwert entgegen. Verwenden Sie die Methode json(), um die Antwort in JSON-Daten zu konvertieren:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nDie JSON-Daten m\u00fcssen noch verarbeitet werden. F\u00fcgen Sie eine weitere `then()`-Anweisung mit einer Funktion hinzu, die ein Argument namens `data` entgegennimmt:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {})\r\n<\/script><\/code><\/pre>\n<\/div>\nErstellen Sie in dieser Funktion eine Variable namens author, die auf die folgenden Daten gesetzt wird:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nF\u00fcr jeden Autor in der Liste \u201eauthors\u201c soll ein Listenelement erstellt werden, das dessen Namen anzeigt. Die map()-Methode eignet sich f\u00fcr dieses Muster:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\n});\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nErstellen Sie in Ihrer map-Funktion eine Variable namens li, die mit createElement und dem HTML-Element li als Argument initialisiert wird. Erstellen Sie au\u00dferdem eine h2-\u00dcberschrift f\u00fcr den Namen und ein span-Element f\u00fcr die E-Mail-Adresse.<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\n});\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nDas h2-Element enth\u00e4lt den Namen des Autors. Das span-Element enth\u00e4lt die E-Mail-Adresse des Autors. Das innerHTML-Attribut und die String-Interpolation erm\u00f6glichen dies:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\nname.innerHTML = `${author.name}`;\r\nemail.innerHTML = `${author.email}`;\r\n});\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nAnschlie\u00dfend f\u00fcgen Sie diese DOM-Elemente mit appendChild hinzu:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\nname.innerHTML = `${author.name}`;\r\nemail.innerHTML = `${author.email}`;\r\nli.appendChild(name);\r\nli.appendChild(email);\r\nlist.appendChild(li);\r\n});\r\n})\r\nul.appendChild(list);\r\n<\/script><\/code><\/pre>\n<\/div>\nBeachten Sie, dass jedes Listenelement der DocumentFragment-Liste hinzugef\u00fcgt wird. Sobald die Zuordnung abgeschlossen ist, wird die Liste dem ungeordneten Listenelement ul hinzugef\u00fcgt.<\/p>\n
Nachdem die beiden `then()`-Funktionen implementiert sind, k\u00f6nnen Sie nun die `catch()`-Funktion hinzuf\u00fcgen. Diese Funktion protokolliert alle m\u00f6glichen Fehler in der Konsole:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\n\/\/ ...\r\n})\r\n.then((data) => {\r\n\/\/ ...\r\n})\r\n.catch(function(error) {\r\nconsole.log(error);\r\n});\r\n\/\/ ...\r\n<\/script><\/code><\/pre>\n<\/div>\nDies ist der vollst\u00e4ndige Code f\u00fcr die von Ihnen erstellte Anfrage:<\/p>\n
\n<h1>Authors<\/h1>\r\n<ul id=\"authors\"><\/ul>\r\n<script>\r\nconst ul = document.getElementById('authors');\r\nconst list = document.createDocumentFragment();\r\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\nname.innerHTML = `${author.name}`;\r\nemail.innerHTML = `${author.email}`;\r\nli.appendChild(name);\r\nli.appendChild(email);\r\nlist.appendChild(li);\r\n});\r\n}).\r\n.catch(function(error) {\r\nconsole.log(error);\r\n});\r\nul.appendChild(list);\r\n<\/script><\/code><\/pre>\n<\/div>\nSie haben soeben erfolgreich eine GET-Anfrage mit der JSONPlaceholder-API und der Fetch-API gesendet. Als N\u00e4chstes werden Sie POST-Anfragen senden.<\/p>\n
Schritt 3 \u2013 Bearbeitung von POST-Anfragen<\/h2>\n
Fetch verwendet standardm\u00e4\u00dfig GET-Anfragen, aber Sie k\u00f6nnen alle anderen Anfragetypen verwenden, Header \u00e4ndern und Daten senden. Erstellen wir eine POST-Anfrage.<\/p>\n
F\u00fcgen Sie zun\u00e4chst eine Konstante hinzu, die den Link zur JSONPlaceholder-API enth\u00e4lt:<\/p>\n
\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\n<\/code><\/pre>\n<\/div>\nAls N\u00e4chstes m\u00fcssen Sie Ihr Objekt einrichten und es als zweites Argument an die fetch-Funktion \u00fcbergeben. Es handelt sich dabei um ein Objekt namens \u201edata\u201c mit dem Schl\u00fcsselnamen \u201eSammy\u201c (oder Ihrem Namen) und dem Wert:<\/p>\n
\n\/\/ ...\r\nlet data = {\r\nname: 'Sammy'\r\n}<\/code><\/pre>\n<\/div>\nDa es sich um eine POST-Anfrage handelt, m\u00fcssen Sie dies explizit angeben. Erstellen Sie ein Objekt namens fetchData:<\/p>\n
\n\/\/ ...\r\nlet fetchData = {\r\n}<\/code><\/pre>\n<\/div>\nDieses Objekt sollte drei Schl\u00fcssel enthalten: Methode, K\u00f6rper und Header:<\/p>\n
\n\/\/ ...\r\nlet fetchData = {\r\nmethod: 'POST',\r\nbody: JSON.stringify(data),\r\nheaders: new Headers({\r\n'Content-Type': 'application\/json; charset=UTF-8'\r\n})\r\n}<\/code><\/pre>\n<\/div>\nDer Methodenschl\u00fcssel hat den Wert \u201cPOST\u201d. Der Body wird auf das JSON.stringify-Format des neu erstellten Datenobjekts gesetzt. Die Header haben den Wert \u00abContent-Type\u00bb: \u00abapplication\/json; charset=UTF-8\u201c.<\/p>\n
Die Headers-Schnittstelle ist ein Feature der Fetch API, mit dem Sie Aktionen an HTTP-Anfrage- und Antwortheadern durchf\u00fchren k\u00f6nnen.<\/p>\n
Durch Einf\u00fcgen dieses Codes kann eine POST-Anfrage \u00fcber die Fetch API gestellt werden. Sie f\u00fcgen die URL, die abzurufenden Daten (fetchData) und die Argumente Ihrer Fetch-POST-Anfrage hinzu:<\/p>\n
\n\/\/ ...\r\nfetch(url, fetchData)<\/code><\/pre>\n<\/div>\nDie Funktion then() enth\u00e4lt Code, der die von der JSONPlaceholder-API empfangene Antwort verarbeitet:<\/p>\n
\n\/\/ ...\r\nfetch(url, fetchData)\r\n.then(function() {\r\n\/\/ Handle response you get from the API\r\n});<\/code><\/pre>\n<\/div>\nDies ist der vollst\u00e4ndige Code f\u00fcr die von Ihnen erstellte Anfrage:<\/p>\n
\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\nlet data = {\r\nname: 'Sammy'\r\n}\r\nlet fetchData = {\r\nmethod: 'POST',\r\nbody: JSON.stringify(data),\r\nheaders: new Headers({\r\n'Content-Type': 'application\/json; charset=UTF-8'\r\n})\r\n}\r\nfetch(url, fetchData)\r\n.then(function() {\r\n\/\/ Handle response you get from the API\r\n});<\/code><\/pre>\n<\/div>\nSie k\u00f6nnen auch die Funktion fetch() an ein Request-Objekt \u00fcbergeben.<\/p>\n
\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\nlet data = {\r\nname: 'Sammy'\r\n}\r\nlet request = new Request(url, {\r\nmethod: 'POST',\r\nbody: JSON.stringify(data),\r\nheaders: new Headers({\r\n'Content-Type': 'application\/json; charset=UTF-8'\r\n})\r\n});\r\nfetch(request)\r\n.then(function() {\r\n\/\/ Handle response you get from the API\r\n});<\/code><\/pre>\n<\/div>\nMit diesem Ansatz kann die Anfrage als einziges Argument f\u00fcr fetch() verwendet werden und ersetzt url und fetchData.<\/p>\n
Sie kennen nun zwei M\u00f6glichkeiten, POST-Anfragen mit der Fetch API zu erstellen und auszuf\u00fchren.<\/p>\n
Ergebnis<\/h2>\n
Obwohl die Fetch API noch nicht von allen Browsern unterst\u00fctzt wird, ist sie eine hervorragende Alternative zu XMLHttpRequest.<\/p>","protected":false},"excerpt":{"rendered":"Die Einf\u00fchrung erfolgte, als XMLHttpRequest f\u00fcr API-Anfragen verwendet wurde. Es umfasste keine Promises und...","protected":false},"author":1,"featured_media":16676,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Fetch API","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"[]","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[384,435],"class_list":{"0":"post-16673","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-java-script","10":"tag-programming"},"yoast_head":"\n
\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0627\u0632 XMLHttpRequest \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u062f. \u0634\u0627\u0645\u0644 Promises \u0646\u0628\u0648\u062f \u0648…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-22T08:01:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647\",\"datePublished\":\"2025-01-22T08:01:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\"},\"wordCount\":154,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"keywords\":[\"Java Script\",\"programming\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\",\"name\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"datePublished\":\"2025-01-22T08:01:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie man die JavaScript Fetch API zum Abrufen von Daten verwendet \u2013 ITPiran-Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","og_locale":"de_DE","og_type":"article","og_title":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0627\u0632 XMLHttpRequest \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u062f. \u0634\u0627\u0645\u0644 Promises \u0646\u0628\u0648\u062f \u0648…","og_url":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2025-01-22T08:01:39+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"9\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647","datePublished":"2025-01-22T08:01:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/"},"wordCount":154,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","keywords":["Java Script","programming"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","name":"Wie man die JavaScript Fetch API zum Abrufen von Daten verwendet \u2013 ITPiran-Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","datePublished":"2025-01-22T08:01:39+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=16673"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16673\/revisions"}],"predecessor-version":[{"id":16675,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16673\/revisions\/16675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/16676"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=16673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=16673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=16673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}