javascript / intermediate
Snippet
Erstellung benutzerdefinierter Fehlerklassen-Hierarchien für asynchrone Vue-Handler
Objektorientierte Fehlerhierarchien erben von der nativen Error-Klasse in JavaScript. In asynchronen Vue-Aktionen ermöglicht die Prüfung mit instanceof auf benutzerdefinierte Fehlerunterklassen eine differenzierte Behandlung von domänenspezifischen Validierungsfehlern gegenüber generischen Netzwerkfehlern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class AppError extends Error {constructor(message, statusCode = 500) {super(message);this.name = this.constructor.name;this.statusCode = statusCode;}}class ValidationError extends AppError {constructor(message, fields = {}) {super(message, 422);this.fields = fields;}}export async function fetchUserData(userId, errorStateRef) {try {if (!userId) throw new ValidationError('User ID missing', { userId: 'Required' });const res = await fetch(`/api/users/${userId}`);if (!res.ok) throw new AppError('Server error', res.status);return await res.json();} catch (err) {if (err instanceof ValidationError) {errorStateRef.value = `Validation failed: ${JSON.stringify(err.fields)}`;} else {errorStateRef.value = 'An unexpected error occurred';}}}
vue
Erklärung
1
class AppError extends Error {
Erstellt eine Basis-Fehlerklasse mit Statuscode-Metadaten.
2
class ValidationError extends AppError {
Erbt vom Basisfehler und transportiert feldspezifische Validierungsdaten.
3
if (!userId) throw new ValidationError('User ID missing', { userId: 'Required' });
Erzeugt und wirft die spezialisierte Unterklasse für ungültige Parameter.
4
if (err instanceof ValidationError) {
Nutzt polymorphe Typüberprüfungen zur differenzierten Behandlung von Validierungsfehlern.