在 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 的可观察对象

    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() 代码行之后延迟，以便当我订阅配置文件时，我的组件会看到它？

编辑：

只是为了清楚。 currentloginAttemp 在 this.loginService.signIn 进行 http 调用时分配。这就是为什么我不确定为什么 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

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

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

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

在进行第二次 http 调用后，我从上面调用了异步函数 ^:

    (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 2

我认为您正在使用主题。您应该使用 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 3

您的问题是您正在使用 BehaviorSubject 并且它会立即发出，以及每次发出 .next() 时都会发出。请参阅有关 BehaviorSubject 如何工作的文档here。因此，您通常会希望跳过第一个发射，因为您实际上只关心其余的发射。在您的情况下，看起来像这样（在 rxjs 6+ 中）：

this.profileService.newProfileObj.pipe(skip(1)).subscribe(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));
  }