{"id":17356623,"url":"https://github.com/luisepkt/async_fetch","last_synced_at":"2025-09-03T13:05:35.815Z","repository":{"id":236924108,"uuid":"793405554","full_name":"luisePkt/async_fetch","owner":"luisePkt","description":"kleines Beispiel mit Erklärung zum fetchen von Daten mit async und await","archived":false,"fork":false,"pushed_at":"2024-08-15T10:01:59.000Z","size":15266,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-03T13:02:47.690Z","etag":null,"topics":["async","await","fetching","try-catch"],"latest_commit_sha":null,"homepage":"https://luisePkt.github.io/async_fetch","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luisePkt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-29T06:55:16.000Z","updated_at":"2024-08-15T10:05:44.000Z","dependencies_parsed_at":"2024-12-06T11:39:45.011Z","dependency_job_id":null,"html_url":"https://github.com/luisePkt/async_fetch","commit_stats":null,"previous_names":["luisepkt/async_fetch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/luisePkt/async_fetch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisePkt%2Fasync_fetch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisePkt%2Fasync_fetch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisePkt%2Fasync_fetch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisePkt%2Fasync_fetch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luisePkt","download_url":"https://codeload.github.com/luisePkt/async_fetch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisePkt%2Fasync_fetch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273446567,"owners_count":25107181,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async","await","fetching","try-catch"],"created_at":"2024-10-15T18:57:37.169Z","updated_at":"2025-09-03T13:05:35.779Z","avatar_url":"https://github.com/luisePkt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fetching mit `async/await`\n\n## Wozu das Ganze?\n\nWährend wir (zum Beispiel beim Fetching) auf eine Antwort vom Server warten, soll unser synchroner Code nicht blockiert werden. Sobald wir die Antwort erhalten, möchten wir aber damit weiterarbeiten. Eine Möglichkeit dafür bietet `async/await`. Diese JavaScript-Keywords sind relativ neu und vereinfachen die asynchrone Programmierung deutlich.\n\n## So funktioniert es\n\nIn unserem Beispiel verwenden wir `async` und `await` zusammen mit `fetch`, um Daten von einer API abzurufen, die eine Liste von Brauereien bereithält.\n\n```javascript\nconst getData = async () =\u003e {\n  const res = await fetch(\"https://api.openbrewerydb.org/v1/breweries\");\n  const dataJson = await res.json();\n  console.log(dataJson);\n};\n\ngetData();\n```\n\n- **`async`** definiert eine Funktion als asynchron und stellt sicher, dass sie ein Promise zurückgibt.\n- **`await`** kann nur innerhalb einer `async`-Funktion verwendet werden.\n  Durch Verwendung von `await` wird die Ausführung des Codes blockiert, bis die Daten verfügbar sind und das Promise erfüllt/abgelehnt ist. Danach wird die Ausführung der `async`-Funktion ganz normal fortgesetzt.\n\n#### Fehlerbehandlung mit Try-Catch\n\nUm Fehler in asynchronem Code mit async/await zu behandeln, verwenden wir `try-catch`. Wenn der Im `catch`-Block können wir Fehler ausgeben oder behandeln. Wenn das Fetch-Promise abgelehnt wird, zum Beispiel aufgrund eines Netzwerkfehlers oder einer ungültigen API-Antwort, wird der Fehler im `catch`-Block behandelt und zum Beispiel in der Konsole ausgegeben:\n\n```javascript\nconst getData = async () =\u003e {\n  try {\n    const res = await fetch(url);\n    const dataJson = await res.json();\n    ...\n  } catch (error) {\n    console.log(error);\n  }\n};\n```\n\n#### Besonderheit in `React`\n\nIn `React` werden Komponenten oft neu gerendert, sobald sich States oder Props ändern. Damit das Fetching nicht bei jedem neuen Rendern wiederholt wird, sollte der gesamte `fetch`-Block in eine `useEffect`-Hook eingebettet werden:\n\n```javaScript\nuseEffect(() =\u003e {\n    const getData = async () =\u003e {\n      try {\n        const res = await fetch(url);\n        ...\n      } catch (error) {\n        console.log(error);\n      }\n    };\n    getData();\n  }, []);\n```\n\n#### Vorteile von `async/await` gegenüber `.then`\n\nDer größte Vorteil von `async/await` gegenüber der Verwendung von `.then`-Ketten ist die Lesbarkeit. Mit `async/await` sieht asynchroner Code fast synchron aus, besteht nur aus wenigen Code-Zeilen und ist dadurch leichter zu lesen.\nAußerdem bietet `async/await` sehr gute Debugging-Möglichkeiten.\n\n# async_fetch\n\nschau dir das Ergebnis an: https://luisePkt.github.io/async_fetch\n\n## Vorschau\n\n![preview](src/images/preview/prev_1.png)\n\n![preview](src/images/preview/prev_2.png)\n\n![preview](src/images/preview/prev_3.png)\n\nmade by hannahnier \u0026 luisePkt\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluisepkt%2Fasync_fetch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluisepkt%2Fasync_fetch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluisepkt%2Fasync_fetch/lists"}