在 http 调用后订阅 observable。 角 6

Question

这是我在 Angular 中遇到的一个问题。 下面的方法进行了两次 http 调用。

  submit(username: string, pword: string) {
    this.loginService.signIn(username, pword);

    this.loginService.currentloginAttemp.subscribe(data => {
      if (data == true) {
        this.profileService.getProfile();    
      }
    });

    this.profileService.newProfileObj.subscribe(dataProfile =>{
      console.log(dataProfile);
    });
  }

---

  submit(username: string, pword: string) {
    this.loginService.signIn(username, pword);

signIn 进行 http 调用并分配给名为 currentloginAttemp 的 observable

    this.loginService.currentloginAttemp.subscribe(data => {
      if (data == true) {
        this.profileService.getProfile();    
      }
    });

上面的代码工作没有任何问题。 this.profileService.getProfile() 进行 http 调用以获取新的配置文件。 下面的代码订阅了获得的配置文件。

    this.profileService.newProfileObj.subscribe(dataProfile =>{
      console.log(dataProfile);
    });
  }

当我做 console.log(dataProfile); 我收到一个未定义的警告。

当我运行这个函数时：

  logout() {
        this.profileService.newProfileObj.subscribe(dataProfile =>{
          console.log(dataProfile);
        });
  }

console.log(dataProfile) 返回一个配置文件。

如何在this.profileService.getProfile()代码行之后延迟，以便当我订阅配置文件时，我的组件会看到它？

编辑：

只是要清楚。 当 this.loginService.signIn 进行 http 调用时分配 currentloginAttemp。 这就是为什么我不确定为什么 newProfileObj 在 this.profileService.getProfile() 方法中分配时为空的原因。

编辑2：

  getProfile() {
    let tempURL = this.getProfileUrl + this.currProfileId.value;
    this.http.get<Profile>(tempURL).subscribe((data) => {
      this.currProfileObj.next(data);
    });
  }

Answer 1

您的问题是您正在使用 BehaviorSubject 并且它会立即发出，以及每次发出 .next() 时都会发出。 在 此处查看有关 BehaviorSubject 如何工作的文档。 正因为如此，你经常想跳过第一次发射，因为你真的只关心其余的。 在您的情况下，它看起来像这样（在 rxjs 6+ 中）：

this.profileService.newProfileObj.pipe(skip(1)).subscribe(dataProfile =>{
  console.log(dataProfile);
});

Answer 2

这是一个解决方案。 但是，我不确定这是否是最佳解决方案。

在我的组件中，我创建了一个函数：

  async delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
  }

在进行第二次 http 调用后，我从上面调用了 async functino ^：

    (async () => { 
      // Do something before delay
      console.log('before delay')

     await this.delay(2000);
      this.profileService.newProfileObj.subscribe(dataProfile =>{
        console.log(dataProfile);
      // Do something after
      console.log('after delay')
  })();

这行得通，虽然我不确定这是否是最好的解决方案。

Answer 3

我认为您正在使用主题。 您应该使用 BehaviorSubject 而不是主题。 主题没有价值。

主题示例：

const subject = new Rx.Subject();
subject.next(1);
subject.subscribe(x => console.log(x));

控制台输出将为空

行为主体示例：

const subject = new Rx.BehaviorSubject();
subject.next(1);
subject.subscribe(x => console.log(x));

控制台输出：1

BehaviorSubject 可以用初始值创建： new Rx.BehaviorSubject(1)

如果您不想使用上述方法，也可以尝试此方法。

 this.profileService.newProfileObj.subscribe(dataProfile =>{
        if (dataProfile) {
            console.log(dataProfile);
          }   
        });
  }

Answer 4

getxTaskXCall()
     getxTask()
      .subscribe(
        success => {
         processFn(success);
        },
        error => {
          // this.errors = error;
        },
        () => {

        }
      );
       getxTask(tId: string, parameters: Array<number>): Observable<[string]> {
        return this.apiService.get(getUrl + tId + '/' + parameters)
            .pipe(map(data => data));
    }

 get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${api_url}${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }