angular - flatMap GET 和 PUT 请求不返回结果

问题描述

我有一个 getUserInfo 函数，可以成功返回用户的 id、电子邮件等。我还有一个 updateUserEmail 函数，它使用 flatMap 来合并 GET 请求（ getUserInfo() ）来进行服务器验证，然后是 PUT 请求。我以前从未使用过 flatMap，所以我也在尝试找出在哪里进行验证。我不确定是否对 get UserInfo 函数进行验证，但这似乎是最合乎逻辑的地方。我需要在 PUT 请求之前验证 GET 请求，以防验证失败并且我不希望 PUT 请求发生。

另外我知道我没有使用 flatMap 中的 userInfo 值。这是因为我真的不知道该怎么做。这不是我可以获取 userInfo._id 的服务器响应。我对这一切都很陌生，所以感谢您的帮助。

用户服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserEmailChange } from './emailChange.model';
import { flatMap } from 'rxjs/operators';
import { AuthService } from '../auth.service';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ProfileService {
  userId = localStorage.getItem("userId: ");

  constructor(private http: HttpClient, private authService: AuthService) { }

  getUserInfo(id: string, oldEmail: string) {

    this.http.get(`http://localhost:3000/api/user/${id}`).pipe(tap(value => 'output: ' + "TEST" + value)).subscribe((res) => {


      if (this.userId === res["posts"]._id && oldEmail === res["posts"].email) {
        console.log("You passed the id and email test");
      }
      else {
        console.log("You failed the test!");
      }
    });

    }

    updateUserEmail(emailChange: UserEmailChange) {
      return this.getUserInfo(this.userId, emailChange.oldEmail)
      .pipe(flatMap(userInfo => this.http.put(`http://localhost:3000/api/user/${this.userId}`, emailChange )));
    }

}

用户组件

import { Component, OnInit } from '@angular/core';
import { ProfileService } from './profile.service';
import { AuthService } from '../auth.service';
import { UserEmailChange } from './emailChange.model';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  userId: string;
  authenticated = false;
  emailResponse: string;
  idResponse: string;
  oldEmail: string;
  constructor(private profileService: ProfileService, private authService: AuthService) { }

  ngOnInit() {
    this.userId = localStorage.getItem("userId: ");
  }

  onUpdateUserEmail(oldEmail: string, newEmail: string) {
    const userEmailChange = new UserEmailChange();
    userEmailChange.oldEmail = oldEmail;
    userEmailChange.newEmail = newEmail;


    this.profileService.updateUserEmail(userEmailChange).subscribe(emailUpdated => {



    });

  }


}

当前在服务中的 updateUserEmail() 中，.pipe 正在返回错误 Property 'pipe' does not exist on type 'void'.ts

标签： angularhttpflatmap

正如@Alexander 提到的，您没有从getUserInfo. 您需要返回可观察对象，然后在将其返回到的函数中执行您需要执行的操作

getUserInfo(id: string, oldEmail: string) {
  return this.http.get(`http://localhost:3000/api/user/${id}`)
                  .pipe(
                    tap(value => 'output: ' + "TEST" + value),
                    tap(res => {
                      if (this.userId === res["posts"]._id && oldEmail === res["posts"].email)
                        console.log("You passed the id and email test");
                      else console.log("You failed the test!");
                    })
                  );
}

updateUserEmail(emailChange: UserEmailChange) {
  return this.getUserInfo(this.userId, emailChange.oldEmail)
             .pipe(
                flatMap(userInfo => this.http.put(`http://localhost:3000/api/user/${this.userId}`, emailChange))
             );
}

angular - flatMap GET 和 PUT 请求不返回结果

问题描述

解决方案

推荐阅读