HTTP 请求取消订阅不起作用答案

【问题标题】：HTTP Request Unsubscribe doesn't workHTTP 请求取消订阅不起作用
【发布时间】：2018-08-21 05:57:11
【问题描述】：

我正在从服务中的json 文件中获取数据并从我的组件中订阅它。我正在对数据进行一些条件检查，一旦匹配，我想停止订阅，但它不工作，仍然在订阅。

服务

getUserData() {
     const url = './assets/json/userslist.json';
     return this.http.get(url);
}

组件

const subscription = this.getuser.getUserData().subscribe(data => {
  Object.values(data).forEach((userdetail) => {
    // tslint:disable-next-line:max-line-length
    if (userdetail.username.indexOf(form.value.email) !== -1 && userdetail.password == form.value.password) {
      console.log('asd');
      if (userdetail.active == true) {
        console.log('asasdfasd');
        this.EventEmitterObj.emit(form.value.email);
        this.router.navigateByUrl('/home');
      } else if (userdetail.active == false) {
        console.log('asd23423432');
        this.deactivateAlert = 'The account is deactivated';
      }
      subscription.unsubscribe();
      console.log('issue');
    } else {
      console.log('12341243');
      this.deactivateAlert = 'Incorrect Username/Password';
    }
  });
});

【问题讨论】：

你为什么在 forEach 中 subscription.unsubscribe();？
当您从 http 调用中获取 json 时，observable 已经完成。检查stackoverflow.com/questions/48516432/… 和stackoverflow.com/questions/35042929/…
无需退订。请求完成后会自动退订。

标签： angular typescript subscribe reactivex

【解决方案1】：

Angular HTTPClient

角度HTTPClient 将在请求完成时自动unsubscribe。那是成功或错误。

同样在您退订时，http 请求已经返回success，因此它已完成。

我从您的代码中了解到的是，您期望 unsubscribe 停止您的循环。 Unsubscribing Subscription 并不意味着停止您的 foreach 循环。要停止foreach 循环，只需使用return 或break。

【讨论】：

【解决方案2】：

您的取消订阅在 subscribe 调用内部。它应该在外部，因为 subscribe 调用只有在您从服务器获得响应后才会执行。

如果您想退订请求，那么您应该在外面退订。

如果您想中断 foreach 循环，请使用 return。

如果您需要任何进一步的说明，请告诉我

【讨论】：