angular - ionic 4 中的 HTTP Post 未通过网络服务

Question

我的 ionic 4 项目的 register.page.ts 文件中有以下方法。每当我单击 register.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;
    }
  })

);

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

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

网络服务

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

尝试使用 map RxJS 运算符而不是 tap 将 register 更改为以下内容。 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 的定义。根据您的服务器代码，您似乎只是发回一个简单的 bool 值，而不是具有属性 Success 的对象。您可能想要更新您的问题并注销服务器的确切响应，因为这肯定会改变 map 的使用方式。实际上，您可以在 map 之前的 pipe() 中添加类似 tap(response => console.log(response)) 的内容，以查看收到的内容.

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

希望对您有所帮助!