In MVC-Umgebung bei JS-Validierung auf Datenbank zugreifen

[borisbaer]

Hallo Rolf,

da fehlt Errorhandling. Und deine Minifunktionen kannst Du auch als Pfeilfunktionen schreiben - der IE, der sie nicht versteht, ist tot.

stimmt, danke für den Hinweis!

response.ok ist false, wenn der Server einen HTTP-Status außerhalb des 2xx Bereichs liefert. Also 403, oder 500. Bei einem 302 hängt es von den fetch-Optionen ab, die Du gesetzt hast, ob fetch dem Redirect folgt oder einen Fehler meldet. Ich kann's grad nicht testen, ich weiß nicht ob bei einem Redirect der erste .then überhaupt aufgerufen wird (die Spec sagt: Mach einen Network Error draus) oder nur ok auf false steht. Aber deswegen hängt man einen catch hinten dran, um Fehler aus erstem .then und Fehler aus .fetch gemeinsam abzuhandeln.

Habe ich übernommen. Auch hier: danke für die Erklärung!

Wenn der erste then Handler eine Exception wirft oder ein rejected promise zurückgibt, geht die Promise-Aufrufkette beim nächsten .catch weiter. Gibt ein .catch-Handler ein "normales" Ergebnis zurück, entsteht wieder ein erfülltes Promise.

return fetch( 'SignUpController.php?username=' + encodeURIComponent(inputValue))
   .then( response => {
      if (!response.ok)
         throw `${response.status} ${response.statusText}`; 
      return response.json();
   })
   .then( json => json.username )
   .catch( err => { 
      console.log("Validation of user name failed: " + err);
      return null;
   });

Also, der fetch-Aufruf funktioniert, ich erhalte in der Konsole folgende Meldung:

Promise { <state>: "pending" }
<state>: "fulfilled"
<value>: true
<prototype>: Promise.prototype { … }
validation.js:179:12

Aber wie komme ich an den Wert von <value> heran, um ihn dann zu verarbeiten?

Übrigens hat mir Visual Code Studio vorgeschlagen, die function für den fetch-Aufruf zu einer sog. asnyc function zu machen. Dies würde dann so aussehen:

async function verifyValue( input, value ) {
	try {
		const response = await fetch( `/verify?${input.name}=${encodeURIComponent( value )}` );
		if ( !response.ok )
			throw `${response.status} ${response.statusText}`;
		const json = await response.json();
		return json.username;
	} catch ( error ) {
		console.log( error );
		return null;
	}
}

Was bringt mir das? Gibt es etwas dabei zu beachten?

Grüße
Boris