如何向Angular视图传递expression错误信息

一个网络应用程序主要有两个部分，一个是前端，另一个是后端。我们将首先从后台开始。快递抓取所有在运行路由处理程序和中间件时发生的错误。我们只需将它们正确地发送到前端，供用户了解。

Express 捕捉并处理同步和异步发生的错误。Express带有一个默认的错误处理程序，所以你不需要自己编写错误处理程序就可以开始使用。

步骤：

创建要使用的Angular应用程序。
也要创建后端路由。
我们在用户注册失败时发送错误。所以我们在Express应用程序中创建了”/signup “路由。现在，当注册失败时，使用res.status(401).json()方法发送错误信息。
现在在前端，Auth.service.ts正在向后端发送注册请求。这将返回一个可观察的响应。所以我们可以订阅这个请求，并在前端将后端响应除外。
因此，错误情况或成功情况都是在返回的可观察变量中处理的。

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

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路线上发送一个帖子请求，并使用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’ })发送一条错误信息；要么通过res.status(401)发送一条401或403的HTTP状态，但没有进一步说明实际出错的原因。

在前台处理错误。

所以通过这种方式，我们可以把它作为一个响应发送到前端，现在在angular的前端，我们可以在服务文件中简单地处理这个问题，所以我们已经创建了一个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()方法，向后端（Express框架）发送HTTP请求，提供用户的详细信息，所以this.http.post()方法返回一个Observable，所以我们可以订阅它，这为我们提供了三个回调方法，第一个是成功案例，第二个是错误案例，第三个是完成（当所有操作执行或结束）。在成功的情况下，我们正在将用户导航到登录页面。

}, (err) => {
    console.log(err.error.message);
    this.error = err.message;
    // In this block you get your error message
    // as "Failed to create new user"
});

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

输出:

如何向Angular视图传递expression错误信息？