ionic 4 中的 HTTP Post 未通过 Web 服务

Question

我的ionic4项目中的register.page.ts文件中有以下方法。每当我单击注册.html表单上的提交按钮时，都会执行此操作。

register(form) {
this.authService.register(form.value).subscribe((res) => {
this.router.navigateByUrl('login');
});
}

此方法使用我的 auth.service.ts 文件调用此方法。

register(postData: User): Observable<AuthResponse> {
return this.http.post<AuthResponse>(`https://1146c1fe.ngrok.io/register`,  
(postData)).pipe(
tap(async (res: AuthResponse ) => {
if (res.Success) {
return true;
} else {
return false;
}
})
);

}

这用于通过创建的 Web 服务注册新用户。 我有以下authresponse.ts接口来存储从服务器获得的信息。

我不确定这个界面应该是什么样子。我只希望从服务器收到是或否，以确定用户是否可以注册。

网络服务

router.post('/register', (req, res) => {  
const user = req.body;   
const passwordPromise = util.promisify(bcrypt.hashSync);
const pass = bcrypt.hashSync(user.password);
let success = true;
createUser(user.name, user.email, pass, [], (err) => {
if (err){
success = false;
res.send(success);
}
});
res.end(success);
});

我想知道何时发送成功，然后想加载一个名为选项卡的新页面。关于如何实现这一目标的任何建议。因此，目前我可以连接到服务器并创建一个用户，但我没有收到服务器的响应，或者我不确定如何处理响应。

Answer 1

尝试使用 RxJS 运算符而不是tap将寄存器更改为以下内容map。 map 用于转换响应，在本例中强制转换为真值或假值。 tap 不用于转换，而是用于副作用：

register(postData: User): Observable<AuthResponse> {
return this.http.post<AuthResponse>(`https://1146c1fe.ngrok.io/register`, postData)
.pipe(
map((res: AuthResponse) => !!res.Success)
);
}

话虽如此，您可能需要分享AuthResponse的定义 .根据您的服务器代码，看起来您只是发回一个简单的布尔值，而不是具有属性Success的对象。您可能需要更新您的问题并注销服务器的确切响应，因为这肯定会改变map的使用方式。您实际上可以在map之前在pipe()中添加类似tap(response => console.log(response))的东西，以查看收到的内容。

您确实应该考虑发回一些排序错误状态代码，例如 4xx 或 5xx，以便您可以简单地使用subscribe()的成功/错误回调来更轻松地管理使用此服务的组件中的句柄成功与错误。

希望对您有所帮助！