# Datenabruf & API (React / Next.js)

> fetch API, axios, async/await, Fehlerbehandlung, Ladezustände, abort controllers

- 20 Interview-Fragen
- Mid-Level
- [Interview-Fragen: React / Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen.md)

## 1. Was gibt die Methode fetch() zurück, wenn sie aufgerufen wird?

**Antwort**

fetch() gibt eine Promise zurück, die mit einem Response-Objekt aufgelöst wird. Im Gegensatz zu axios lehnt fetch HTTP-Fehler (wie 404 oder 500) nicht automatisch ab, daher ist es notwendig, response.ok zu prüfen, bevor die Daten geparst werden. Dieser Ansatz bietet mehr Kontrolle über die Fehlerbehandlung, erfordert aber eine explizite Statusprüfung.

## 2. Wie extrahiert man JSON-Daten aus einem mit fetch() erhaltenen Response-Objekt?

**Antwort**

Das Response-Objekt besitzt eine json()-Methode, die eine Promise zurückgibt, die mit den geparsten Daten aufgelöst wird. Diese Methode ist asynchron, da sie den Antwortkörper schrittweise liest. Es ist wichtig, zuerst response.ok zu prüfen, bevor json() aufgerufen wird, um sicherzustellen, dass die Anfrage erfolgreich war.

## 3. Welche Eigenschaft des Response-Objekts ermöglicht es zu prüfen, ob die HTTP-Anfrage erfolgreich war?

**Antwort**

Die Eigenschaft response.ok gibt true zurück, wenn der HTTP-Statuscode zwischen 200 und 299 liegt, was eine erfolgreiche Antwort anzeigt. Diese Eigenschaft ist wichtig, da fetch() im Gegensatz zu axios HTTP-Fehler nicht automatisch ablehnt. response.ok vor der Datenverarbeitung zu prüfen, ist eine bewährte Praxis, um das Parsen von Fehlerantworten zu vermeiden.

## 17 weitere Fragen verfügbar

- Welches Schlüsselwort ermöglicht es, in einer async-Funktion synchron auf die Auflösung einer Promise zu warten?
- In welcher Reihenfolge sollten die folgenden Methoden bei einem fetch() aufgerufen werden: json(), then(), catch()?

Kostenlos registrieren: https://sharpskill.dev/de/login

## Weitere React / Next.js-Interviewthemen

- [JavaScript-Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/javascript-essentials.md): 25 Fragen, Junior
- [React-Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-fundamentals.md): 20 Fragen, Junior
- [React Hooks](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-hooks.md): 22 Fragen, Junior
- [Komponentenlebenszyklus](https://sharpskill.dev/de/technologies/react-next/interviewfragen/component-lifecycle.md): 18 Fragen, Junior
- [React Router](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-router.md): 20 Fragen, Junior
- [Zustandsverwaltung mit Context](https://sharpskill.dev/de/technologies/react-next/interviewfragen/state-management-context.md): 18 Fragen, Junior
- [Formulare & Controlled Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/forms-controlled-components.md): 20 Fragen, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-query-tanstack.md): 20 Fragen, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/de/technologies/react-next/interviewfragen/styling-css-in-js.md): 18 Fragen, Mid-Level
- [Next.js Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-fundamentals.md): 25 Fragen, Mid-Level
- [TypeScript mit React](https://sharpskill.dev/de/technologies/react-next/interviewfragen/typescript-react.md): 20 Fragen, Mid-Level
- [Next.js Data Fetching](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-data-fetching.md): 24 Fragen, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-server-actions.md): 20 Fragen, Mid-Level
- [Routing & Navigation in Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-routing-navigation.md): 22 Fragen, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-api-routes.md): 20 Fragen, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-metadata-seo.md): 18 Fragen, Mid-Level
- [Next.js Middleware & Auth](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-middleware-auth.md): 22 Fragen, Mid-Level
- [React Testing](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-testing.md): 20 Fragen, Mid-Level
- [Zustand State Management](https://sharpskill.dev/de/technologies/react-next/interviewfragen/zustand-state-management.md): 18 Fragen, Mid-Level
- [React Performance-Optimierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-performance-optimization.md): 22 Fragen, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-error-boundaries.md): 18 Fragen, Senior
- [Advanced React Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/advanced-react-patterns.md): 20 Fragen, Senior
- [Erweiterte Next.js-Funktionen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-advanced-features.md): 24 Fragen, Senior
- [Next.js Deployment & Produktion](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-deployment-production.md): 20 Fragen, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-architecture-patterns.md): 22 Fragen, Senior
- [React Server Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-server-components.md): 26 Fragen, Senior
- [Next.js Internationalisierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-internationalization.md): 20 Fragen, Senior
- [React Sicherheit & Best Practices](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-security-best-practices.md): 22 Fragen, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/technologies/react-next/interviewfragen/fetching-data-api