Hay principalmente dos partes de una aplicación web, una es el front-end y otra es el back-end. Comenzaremos con el backend primero. Express captura todos los errores que ocurren al ejecutar controladores de ruta y middleware. Solo tenemos que enviarlos correctamente a la interfaz para el conocimiento del usuario.
Express captura y procesa los errores que ocurren tanto sincrónicamente como asincrónicamente. Express viene con un controlador de errores predeterminado, por lo que no necesita escribir uno propio para comenzar.
Acercarse:
- Cree la aplicación Angular que se utilizará.
- Cree también las rutas de back-end.
- Enviamos el error durante la falla de registro del usuario. Así que hemos creado la ruta «/registro» en la aplicación express. Ahora, si falla el registro, envíe el error usando el método res.status(401).json().
- Ahora, en el lado frontal, auth.service.ts está enviando la solicitud de registro al backend. Esto devolverá una respuesta observable. Entonces podemos suscribirnos a esta solicitud y excepto la respuesta del backend en el lado del frontend.
- Entonces, el caso de error o el caso de éxito se manejan dentro del observable devuelto.
Ejemplo: Explíquelo con un ejemplo muy simple, digamos que estamos tratando de crear un nuevo usuario en la base de datos y enviar una solicitud de publicación para esto desde la página de registro.
users.js
router.post('/signup',UserController.(req,res)=>{
bcrypt.hash(req.body.password,10)
.then((hash)=>{
var user = new User({
email: req.body.email,
password: hash
})
User.save((err,d)=>{
if(err){
res.status(401).json({
message: 'Failed to create new user'
})
} else{
res.status(200).json({
message: 'User created'
})
}
})
})
})
En el código anterior, enviaremos una solicitud de publicación en la ruta / registro que usar la biblioteca bcrypt para codificar la contraseña y luego crear un objeto de usuario que contenga los datos que queremos guardar en la base de datos. Luego, el método User.save() guarda los datos en la base de datos y luego ocurre cualquiera de los dos escenarios, por lo que los datos se guardaron correctamente en una base de datos o se produjo algún error.
Entonces, si los datos se guardaron correctamente, podemos enviar la respuesta de éxito al usuario.
Sintaxis:
res.status(200).json({
message: 'User created'
})
Pero si los datos no se guardan en la base de datos, obtenemos un objeto de error en la devolución de llamada. Si recibimos un error, o conocemos el escenario en el que ocurre el error, simplemente enviamos.
res.status(401).json({
message: 'Failed to create new user'
})
Se envió un mensaje de error a través de res.status(200).send({mensaje: ‘usuario creado’}); con un estado HTTP 200, o envíe un estado HTTP 401 o 403 sin más información sobre lo que realmente salió mal con un estado res.(401).
Error de manejo en el lado frontal
Entonces, de esta manera, podemos enviarlo como respuesta a la interfaz ahora en el lado de la interfaz en angular. Podemos manejar esto simplemente en el archivo de servicio, por lo que hemos creado un archivo auth.service.ts desde donde enviamos una solicitud a el back-end
auth.service.ts
addUser(user) {
this.http.post(BACKEND_URL + '/signup', user)
.subscribe((res) => {
this.router.navigate(['/auth/login']);
}, (err) => {
this.error = err.message;
console.log(err.message);
// In this block you get your error message
// as "Failed to create new user"
});
}
Aquí hemos creado un método addUser() que envía una solicitud HTTP al backend (marco Express) proporcionando detalles del usuario, por lo que este método http.post() devuelve un Observable, por lo que podemos suscribirlo y nos proporciona tres métodos de devolución de llamada primero caso de éxito, el segundo es caso de error y el tercero está hecho (cuando todas las operaciones se realizan o finalizan). En el caso de éxito, estamos navegando al usuario a la página de inicio de sesión.
auth.service.ts
}, (err) => {
console.log(err.error.message);
this.error = err.message;
// In this block you get your error message
// as "Failed to create new user"
});
Entonces, en el segundo método de devolución de llamada, podemos acceder al mensaje de error que estamos enviando desde el backend. Entonces podemos enviar cualquier dato desde el backend al frontend.
Producción:
