Javascript 角度6-错误发生后UI冻结

服务使用

HttpClient

核心服务发送http请求，如：

return this.httpService.get<MyObj[]>(myURL).pipe(catchError(errorHandle));

现在，

this.isLoading

在UI中用于防止div呈现，而是显示“加载…”。当我在

handleError

中将其设置为false时，它会更新属性，但不会影响UI。它一直在加载

参考代码：

组件：

handleError(error: HttpErrorResponse) {
    this.isLoading = false;
    if(error.error instanceof ErrorEvent) {
      this.error = error.error.message;
    } else {
      this.error = "Backend server error, status code:" + error.status
    }
    return throwError('Something bad happened');
}

ngOnInit() {
    //returns 400 Bad Request
 this.variablesService.getVariables(URL.MODELVARIABLE+','+URL.METRICVARIABLE, this.handleError).subscribe(variables => {
      this.fetchedVariables = variables.map(variable => new Variable(variable));
      this.variables = this.fetchedVariables.filter(variable => variable.isglobal);
      this.populateGridItems(GRIDNAME.GlobalVariable, this.variables);
      this.isLoading = false;
    });
}

<error [error]="error"></error> <!-- content which should show as ive set this.error but still doesnt -->
<div *ngIf="!isLoading && !error">
...content that doesnt show which is fine
</div>
<p *ngIf="isLoading">Loading..</p> <!-- keeps showing even when ive set it to false -->

UI:

handleError(error: HttpErrorResponse) {
    this.isLoading = false;
    if(error.error instanceof ErrorEvent) {
      this.error = error.error.message;
    } else {
      this.error = "Backend server error, status code:" + error.status
    }
    return throwError('Something bad happened');
}

ngOnInit() {
    //returns 400 Bad Request
 this.variablesService.getVariables(URL.MODELVARIABLE+','+URL.METRICVARIABLE, this.handleError).subscribe(variables => {
      this.fetchedVariables = variables.map(variable => new Variable(variable));
      this.variables = this.fetchedVariables.filter(variable => variable.isglobal);
      this.populateGridItems(GRIDNAME.GlobalVariable, this.variables);
      this.isLoading = false;
    });
}

<error [error]="error"></error> <!-- content which should show as ive set this.error but still doesnt -->
<div *ngIf="!isLoading && !error">
...content that doesnt show which is fine
</div>
<p *ngIf="isLoading">Loading..</p> <!-- keeps showing even when ive set it to false -->

…不显示哪种是好的内容
正在加载..

您“处理”了错误，但随后您重新播放了错误，并且从未处理过重新播放的错误，未经处理的错误会打断可观察的流。您有两种选择：

不要重复错误

handleError(error: HttpErrorResponse) {
    this.isLoading = false;
    if(error.error instanceof ErrorEvent) {
      this.error = error.error.message;
    } else {
      this.error = "Backend server error, status code:" + error.status
    }
    return empty();
}

或处理要订阅的第二个参数中的rethrown错误：

this.variablesService.getVariables(URL.MODELVARIABLE+','+URL.METRICVARIABLE, this.handleError).subscribe(variables => {
  this.fetchedVariables = variables.map(variable => new Variable(variable));
  this.variables = this.fetchedVariables.filter(variable => variable.isglobal);
  this.populateGridItems(GRIDNAME.GlobalVariable, this.variables);
  this.isLoading = false;
},
(error) => console.log(error, "do whatever you want here"));

你“处理”了错误，但是你重新抛出了错误，并且从不处理重新抛出的错误，一个未处理的错误会打断一个可观察的流。您有两种选择：

不要重复错误

handleError(error: HttpErrorResponse) {
    this.isLoading = false;
    if(error.error instanceof ErrorEvent) {
      this.error = error.error.message;
    } else {
      this.error = "Backend server error, status code:" + error.status
    }
    return empty();
}

或处理要订阅的第二个参数中的rethrown错误：

this.variablesService.getVariables(URL.MODELVARIABLE+','+URL.METRICVARIABLE, this.handleError).subscribe(variables => {
  this.fetchedVariables = variables.map(variable => new Variable(variable));
  this.variables = this.fetchedVariables.filter(variable => variable.isglobal);
  this.populateGridItems(GRIDNAME.GlobalVariable, this.variables);
  this.isLoading = false;
},
(error) => console.log(error, "do whatever you want here"));

---

您确定调用了

errorHandle

函数吗？您可以添加一个

console.log（…）

来检查。@Ploppy是的，我检查过了。我登录以查看this.isLoading是否正在更新您确定调用了

errorHandle

函数吗？您可以添加一个

console.log（…）

来检查。@Ploppy是的，我检查过了。我登录以查看此.isLoading是否正在更新。只能在8分钟后接受！非常感谢它的工作。所以，为了让自己更清楚一点，

.pipe（）

就像是结果和请求之间的中间部分？pipe就像定义一组步骤来处理可观察的数据流。您的http请求是一个可观察的流，管道定义了一组对该流执行的操作。在这种情况下，操作正在处理错误。但是，如果您在处理程序中抛出一个新错误，而不处理该新错误，那么就不会有任何内容捕获它，因为它是在管道中的错误处理步骤之后发生的。解释得很好！谢谢。8分钟后才能接受！非常感谢它的工作。所以，为了让自己更清楚一点，

.pipe（）

就像是结果和请求之间的中间部分？pipe就像定义一组步骤来处理可观察的数据流。您的http请求是一个可观察的流，管道定义了一组对该流执行的操作。在这种情况下，操作正在处理错误。但是，如果您在处理程序中抛出一个新错误，而不处理该新错误，那么就不会有任何内容捕获它，因为它是在管道中的错误处理步骤之后发生的。解释得很好！谢谢