如何将快速错误消息传递给 Angular 视图？

Web应用程序主要有两个部分，一个是前端，另一个是后端。我们将首先从后端开始。 express 捕获运行路由处理程序和中间件时发生的所有错误。我们必须将它们正确发送到前端以获取用户知识。

Express 捕获并处理同步和异步发生的错误。 Express 带有一个默认的错误处理程序，因此您无需编写自己的程序即可开始使用。

方法：

• 创建要使用的 Angular 应用程序。
• 同时创建后端路由。
• 我们在用户注册失败期间发送错误。所以我们在 express 应用中创建了“/signup”路由。现在在注册失败时使用 res.status(401).json() 方法发送错误。
• 现在在前端，auth.service.ts 正在向后端发送注册请求。这将返回一个可观察的响应。所以我们可以订阅这个请求，除了前端的后端响应。
• 因此，错误案例或成功案例都是在返回的 observable 中处理的。

示例：用一个非常简单的示例来解释它假设我们正在尝试在数据库中创建一个新用户并从注册页面发送一个发布请求。

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'
                })
            }
        })
    })
})

在上面的代码中，我们将在 /signup 路由上发送一个 post 请求，而不是使用 bcrypt 库对密码进行编码，然后创建一个用户对象来保存我们要保存在数据库中的数据。然后User.save()方法将数据保存到数据库，然后发生两种情况之一，因此数据成功保存在数据库中或发生任何错误。

因此，如果数据保存成功，那么我们可以向用户发送成功响应。

句法：

res.status(200).json({
    message: 'User created'
})

但是如果数据没有保存到数据库中，那么我们会在回调中得到一个错误对象。如果我们收到错误，或者我们知道发生错误的场景，那么我们只需发送。

res.status(401).json({
   message: 'Failed to create new user'
})

它要么通过 res.status(200).send({ message: 'user created' }); 发送错误消息。带有 200 HTTP 状态，或发送 401 或 403 HTTP 状态，而没有关于 res.status(401) 实际出了什么问题的进一步信息。

前端处理错误

因此，通过这种方式，我们现在可以在前端以角度将其作为响应发送到前端，我们可以在服务文件中简单地处理这个问题，因此我们创建了一个auth.service.ts文件，我们从该文件发送请求到后端。

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"
        });
}

在这里，我们创建了一个 addUser() 方法，该方法将 HTTP 请求发送到后端（Express 框架），提供用户详细信息，因此this.http.post() 方法返回一个 Observable，因此我们可以订阅它，这为我们提供了三个回调方法首先是成功案例，第二个是错误案例，第三个完成（当所有操作执行或结束时）。在成功的情况下，我们将用户导航到登录页面。

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"
});

所以在第二个回调方法中，我们可以访问我们从后端发送的错误消息。所以我们可以将任何数据从后端发送到前端。

输出：