Meta tags:
description=Die Fetch API ist eine moderne JavaScript-Schnittstelle für Netzwerkanfragen und überzeugt durch Einfachheit, Flexibilität und erweiterte Funktionen gegenüber…;

Headings (most frequently used words):

fetch, api, die, fehlerbehandlung, anfrage, async, await, mit, javascript, verstehen, in, eine, post, implementieren, nutzen, fehlerweiterleitung, verwandte, themen, fazit, übungen, grundlegende, verwendung, von, antwort, untersuchen, den, body, lesen, json, vs, text, benutzerdefinierte, header, senden,

Text of the page (most frequently used words):
und (68), fetch (52), response (43), die (42), api (42), json (36), #javascript (32), der (32), mit (31), sie (28), error (22), await (20), ein (20), das (19), dom (19), async (18), console (18), für (17), ist (16), log (16), lernen (15), wie (15), fehler (14), von (14), den (14), fehlerbehandlung (13), promise (13), jsonplaceholder (13), body (13), text (12), headers (12), data (11), catch (11), oder (11), then (11), status (10), html (9), anfrage (9), auf (9), einen (9), können (9), https (9), typicode (9), com (9), run (9), editable (9), einem (9), web (8), eine (8), bei (8), anfragen (8), wird (8), fetchdata (8), try (8), const (8), antwort (8), methoden (8), code (7), post (7), werden (7), methode (7), function (7), new (7), object (7), tools (6), kann (6), zur (6), get (6), daten (6), dem (6), wenn (6), als (6), posts (6), server (6), string (6), w3docs (5), alle (5), übungen (5), einer (5), nicht (5), zum (5), funktionen (5), viewdata (5), throw (5), http (5), the (5), beispiel (5), header (5), content (5), senden (5), events (5), formatter (5), color (5), generator (4), css (4), fehlerweiterleitung (4), was (4), prüfen (4), promises (4), nur (4), netzwerkanfragen (4), block (4), sich (4), eines (4), type (4), lesen (4), eigenschaften (4), shadow (4), einführung (4), entwickler (3), encoder (3), editor (3), quizze (3), php (3), this (3), page (3), keine (3), verwendet (3), auftreten (3), folgenden (3), sind (3), webanwendungen (3), durch (3), zeigt (3), abrufen (3), unter (3), erstellen (3), cors (3), cross (3), origin (3), requests (3), suche (3), diese (3), wir (3), nonexistent (3), return (3), nach (3), chaining (3), ihn (3), dieses (3), moderne (3), network (3), syntax (3), erfolgreich (3), method (3), benutzerdefinierte (3), headern (3), length (3), löst (3), blob (3), gibt (3), zurück (3), statustext (3), statuscode (3), aufgelöst (3), url (3), formulare (3), muster (3), xmlhttprequest (3), flag (3), document (3), browser (3), objekte (3), event (3), and (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), über (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), beispiele (2), snippets (2), fazit (2), verwandte (2), themen (2), nutzen (2), implementieren (2), verstehen (2), formdata (2), canvas (2), beschränkt (2), binärdaten (2), verarbeiten (2), besser (2), abgefangen (2), operationen (2), welche (2), aussagen (2), wahr (2), anhand (2), dieser (2), leitfaden (2), verwendung (2), nützlich (2), aufrufe (2), funktion (2), behandelt (2), abfangen (2), werfen (2), call (2), stack (2), beschreibt (2), anderen (2), stellen (2), fängt (2), ruft (2), beitrag (2), fetchpost (2), not (2), there (2), has (2), been (2), problem (2), with (2), your (2), operation (2), umgang (2), lässt (2), kombinieren (2), append (2), application (2), bearer (2), token (2), typ (2), übergeben (2), klasse (2), snippet (2), beim (2), verschiedenen (2), stringify (2), müssen (2), fehlerstatus (2), codes (2), raw (2), parsing (2), einfachen (2), selbst (2), array (2), dabei (2), 500 (2), 404 (2), 200 (2), bevor (2), beitrags (2), anschließend (2), grundlegende (2), ressourcen (2), apis (2), workers (2), file (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), microtasks (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), verwenden (2), property (2), arrow (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, seit, 2014, next, previous, yes, helpful, antworten, blobs, saubereren, lesbaren, verwaltung, asynchroner, übung, unverzichtbares, werkzeug, ihren, basierten, ansatz, bereichert, praktischer, effektiv, eingesetzt, realitätsnahe, anwendungsfälle, beherrschung, befähigt, reaktionsfähigere, dynamischere, robustere, andere, domains, kontrolliert, abbrechen, timeouts, während, eingabe, abortcontroller, abort, eleganteste, schreiben, fundament, aufbaut, tiefer, einzutauchen, erkunden, verwandten, kapitel, sehen, dasselbe, fehlerobjekt, beiden, weil, weiterwerfen, rethrow, you, want, caller, also, have, chance, handle, aufrufenden, sollen, sollten, entweder, vermeiden, abzufangen, erneut, geschieht, dies, typischerweise, rejection, behandelte, ablehnung, aufwärts, wandert, bis, globaler, handler, abfängt, teil, ihres, programms, weitergegeben, weg, vor, seinem, nimmt, auftritt, fallenlassen, balls, wohin, ball, fallen, geht, jemand, trifft, boden, failed, behandeln, asynchronen, ihre, einschließen, auftretende, hinzufügen, kommen, regel, blöcke, einsatz, wartet, verarbeitet, innerhalb, blocks, features, nutzung, vereinfachen, eleganteren, asynchronem, bietet, lesbare, synchronem, ähnelt, hinweis, ursprung, dann, per, erlaubt, erfahren, regeln, anmeldedaten, beeinflussen, accept, authorization, 123, teilen, informationen, erwartete, antwortformat, authentifizierungsdaten, einfaches, mehr, kontrolle, demonstriert, angabe, veranschaulicht, vielseitigkeit, anfragetypen, title, foo, bar, userid, charset, utf, eignet, gleichermaßen, gut, zweites, argument, sowohl, serialisieren, auch, setzen, damit, weiß, parsen, soll, neuen, diesem, falls, geworfen, wahrt, integrität, anwendung, arbeit, entscheidend, ausnahme, wirft, besteht, standardmuster, darin, eigenen, wert, hier, false, read, instead, bilder, dateien, rohen, übernehmen, möchten, parst, formaten, gelesen, jede, pro, aufgerufen, stream, verbraucht, einmal, abfragen, textnachricht, gehört, numerische, boolean, bereich, 299, liegt, true, enthält, nützliche, metadaten, noch, wichtigsten, untersuchen, bestimmten, zurückgibt, geparst, konsole, ausgegeben, beginnen, wichtiger, fallstrick, lehnt, verbindung, dns, abgelehnt, weiterhin, netzwerk, signatur, lautet, vollständig, heruntergeladen, wurde, separat, jeweils, ihr, eigenes, zurückgeben, sobald, antwortet, options, netzwerkkommunikation, konzipiert, basierendes, system, flexibel, genug, verschiedene, datenformate, komplexe, verwalten, hervorragenden, wahl, entwicklung, macht, zentrales, feature, herunterladen, absenden, kommunizieren, ersatz, ältere, natürlich, gängigsten, auswerten, sowie, kostenlosen, ausführbaren, beispielen, schnittstelle, überzeugt, einfachheit, flexibilität, erweiterte, gegenüber, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, sent, ursprungsübergreifende, abbruch, download, fortschritt, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, ohne, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, kopieren, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
hrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript fetch api die fetch api ist eine moderne javascript schnittstelle für netzwerkanfragen und überzeugt durch einfachheit flexibilität und erweiterte funktionen gegenüber xmlhttprequest die fetch api ist ein zentrales feature in javascript mit dem sie netzwerkanfragen stellen können daten herunterladen formulare absenden mit apis kommunizieren sie gibt dabei ein promise zurück sie ist der moderne ersatz für das ältere xmlhttprequest und lässt sich natürlich mit async await kombinieren dieser leitfaden behandelt die gängigsten muster get und post anfragen das auswerten der antwort das lesen von json und text das senden von headern sowie die fehlerbehandlung anhand der kostenlosen jsonplaceholder api mit ausführbaren beispielen die fetch api verstehen die fetch api ist für die netzwerkkommunikation konzipiert und verwendet ein auf promises basierendes system zum abrufen von ressourcen sie ist flexibel genug um verschiedene datenformate und komplexe anfragen zu verwalten was sie zu einer hervorragenden wahl für die entwicklung von webanwendungen macht die grundlegende signatur lautet fetch url options sie gibt ein promise zurück das zu einem response object aufgelöst wird sobald der server mit den headern antwortet bevor der body vollständig heruntergeladen wurde den body lesen sie anschließend separat mit einer methode wie json oder text die jeweils ihr eigenes promise zurückgeben ein wichtiger fallstrick fetch lehnt ein promise nur bei einem netzwerk fehler ab keine verbindung dns fehler cors block bei http fehlerstatus codes wie 404 oder 500 wird das promise nicht abgelehnt diese werden weiterhin erfolgreich aufgelöst sie müssen response ok oder response status selbst prüfen grundlegende verwendung von fetch beginnen wir mit einem einfachen beispiel zum abrufen von daten eines jsonplaceholder beitrags javascript editable run fetch https jsonplaceholder typicode com posts 1 then response response json then json console log json dieses snippet ruft daten eines bestimmten beitrags ab und zeigt wie fetch ein promise zurückgibt das zur antwort der anfrage aufgelöst wird die antwort wird anschließend als json geparst und in der konsole ausgegeben die antwort untersuchen das response object enthält nützliche metadaten noch bevor sie den body lesen die wichtigsten eigenschaften sind response ok ein boolean der true ist wenn der statuscode im bereich 200 299 liegt response status der numerische http statuscode z b 200 404 500 response statustext die textnachricht die zum statuscode gehört z b ok response headers ein headers object das sie mit get abfragen können javascript editable run fetch https jsonplaceholder typicode com posts 1 then response console log ok response ok console log status response status console log statustext response statustext console log content type response headers get content type den body lesen json vs text der body einer antwort kann in verschiedenen formaten gelesen werden jede methode gibt ein promise zurück und kann pro antwort nur einmal aufgerufen werden der body ist ein stream der dabei verbraucht wird response json parst den body als json und löst ihn zu einem javascript object oder array auf response text löst den rohen body als string auf nützlich für einfachen text html oder wenn sie das json parsing selbst übernehmen möchten response blob löst zu einem blob auf für binärdaten wie bilder oder dateien javascript editable run read the raw response as text instead of parsing json fetch https jsonplaceholder typicode com posts 1 then response response text then text console log raw text text console log length text length fehlerbehandlung in fetch die fehlerbehandlung ist bei der arbeit mit netzwerkanfragen entscheidend da fetch bei http fehlerstatus codes keine ausnahme wirft besteht das standardmuster darin response ok zu prüfen und einen eigenen fehler zu werfen wenn der wert false ist hier ist ein beispiel mit fehlerbehandlung javascript editable run fetch https jsonplaceholder typicode com nonexistent then response if response ok throw new error network response was not ok status response status return response json then json console log json catch error console log there has been a problem with your fetch operation error in diesem beispiel prüfen wir ob die antwort erfolgreich ist falls nicht wird ein fehler geworfen die methode catch fängt alle fehler ab und wahrt so die integrität der anwendung eine post anfrage implementieren die fetch api ist nicht auf get anfragen beschränkt sie eignet sich gleichermaßen gut für post anfragen um daten an einen server zu senden übergeben sie ein zweites argument mit method einem body und headers beim senden von json müssen sie den body sowohl mit json stringify serialisieren als auch den content type header setzen damit der server weiß wie er ihn parsen soll so erstellen sie einen neuen beitrag mit jsonplaceholder javascript editable run fetch https jsonplaceholder typicode com posts method post body json stringify title foo body bar userid 1 headers content type application json charset utf 8 then response response json then json console log json dieses code snippet demonstriert das senden einer post anfrage mit json daten unter angabe von methode body und headern es veranschaulicht die vielseitigkeit der fetch api beim umgang mit verschiedenen anfragetypen benutzerdefinierte anfrage header senden header teilen dem server informationen über die anfrage mit den content typ das erwartete antwortformat oder authentifizierungsdaten wie einen bearer token sie können header als einfaches object übergeben oder sie für mehr kontrolle mit der headers klasse erstellen javascript editable run const headers new headers headers append accept application json headers append authorization bearer my token 123 fetch https jsonplaceholder typicode com posts 1 method get headers headers then response response json then json console log json hinweis eine anfrage an einen anderen ursprung ist nur dann erfolgreich wenn der server sie per cors erlaubt unter fetch cross origin requests erfahren sie wie cross origin regeln header und anmeldedaten beeinflussen async await mit fetch nutzen für einen eleganteren umgang mit asynchronem code lässt sich die fetch api mit async und await kombinieren diese methode bietet eine besser lesbare syntax die synchronem code ähnelt javascript editable run async function fetchpost try const response await fetch https jsonplaceholder typicode com posts 1 if response ok throw new error network response was not ok const json await response json console log json catch error console error there has been a problem with your fetch operation error fetchpost mit async und await ruft dieses beispiel einen beitrag ab wartet auf die antwort und verarbeitet sie innerhalb eines try catch blocks zur fehlerbehandlung es zeigt wie moderne javascript features die nutzung der fetch api vereinfachen können fehlerbehandlung mit async await bei der fehlerbehandlung mit async await kommen in der regel try catch blöcke zum einsatz um fehler zu behandeln die bei asynchronen operationen auftreten können können sie ihre await aufrufe in einen try block einschließen und auftretende fehler mit einem catch block abfangen so können sie der funktion fetchdata eine fehlerbehandlung hinzufügen javascript editable run async function fetchdata try const response await fetch https jsonplaceholder typicode com nonexistent if response ok throw new error http error status response status const data await response json return data catch error console log failed to fetch data error fetchdata fehlerweiterleitung fehlerweiterleitung beschreibt wie ein fehler von einem teil ihres programms zu einem anderen weitergegeben wird stellen sie es sich als den weg vor den ein fehler nach seinem auftreten nimmt wenn ein fehler auftritt ist es wie das fallenlassen eines balls die fehlerweiterleitung beschreibt wohin der ball nach dem fallen geht fängt ihn jemand auf oder trifft er den boden in javascript geschieht dies typischerweise durch promise rejection chaining bei dem eine nicht behandelte ablehnung den call stack aufwärts wandert bis ein catch block oder ein globaler handler sie abfängt im folgenden beispiel wenn fehler von der aufrufenden funktion wie viewdata behandelt werden sollen sollten sie es entweder vermeiden fehler in fetchdata abzufangen oder sie nach dem abfangen erneut werfen javascript editable run async function fetchdata try const response await fetch https jsonplaceholder typicode com nonexistent if response ok throw new error http error status response status const data await response json return data catch error console log error in fetchdata error throw error rethrow if you want the caller to also have the chance to handle it async function viewdata try const data await fetchdata console log data data catch error console log error in viewdata error viewdata wie sie sehen können wird dasselbe fehlerobjekt in beiden funktionen abgefangen weil wir es von fetchdata an viewdata weiterwerfen verwandte themen um tiefer in die fetch api einzutauchen erkunden sie diese verwandten kapitel javascript promise das fundament auf dem fetch aufbaut async await die eleganteste methode fetch aufrufe zu schreiben fetch abort eine anfrage mit abortcontroller abbrechen nützlich für timeouts und suche während der eingabe fetch cross origin requests wie cors anfragen an andere domains kontrolliert fazit die fetch api ist ein unverzichtbares werkzeug für javascript entwickler das webanwendungen durch ihren promise basierten ansatz für netzwerkanfragen bereichert anhand praktischer beispiele zeigt dieser leitfaden wie die fetch api effektiv zum abrufen von daten zur fehlerbehandlung und für post anfragen eingesetzt werden kann unter verwendung der jsonplaceholder api für realitätsnahe anwendungsfälle die beherrschung der fetch api befähigt entwickler reaktionsfähigere dynamischere und robustere webanwendungen zu erstellen übungen übung welche der folgenden aussagen zur fetch api in javascript sind wahr welche der folgenden aussagen zur fetch api in javascript sind wahr die fetch api kann nur get anfragen verarbeiten die fetch api verwendet promises zur verwaltung asynchroner operationen fehler die bei einer fetch anfrage auftreten können nicht abgefangen werden die fetch api kann mit async und await für einen saubereren und besser lesbaren code verwendet werden die fetch api ist auf text und json antworten beschränkt und kann keine binärdaten wie blobs verarbeiten prüfen was this page helpful yes no previous canvas next formdata on this page die fetch api verstehen fehlerbehandlung in fetch eine post anfrage implementieren async await mit fetch nutzen fehlerbehandlung mit async await fehlerweiterleitung verwandte themen fazit übungen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tool...