afterclose() 的问题

我有一个函数，当执行它时，有时导航有效，有时则无效（有时它进入 if，有时它进入 else）。通过控制台，我首先看到的是 else 的 console.log，然后出现在打开的对话框中找到的 console.log，这比 else 早得多。

我尝试过的：

approved(){
    localStorage.setItem('encargado', this.approach.responsable.id)
    localStorage.setItem('cliente', this.approach.client.id)
    localStorage.setItem('approach', this.id)
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
  }

解决方案1

由于这个问题已经休眠很长时间了，因此值得研究一下如何解决这个问题，以自我诊断问题所在。让我们“按原样”使用代码，看看稍微重新安排一下问题将如何简化调试。首先，这是当前代码的样子：

打字稿

approved(){
    localStorage.setItem('encargado', this.approach.responsable.id)
    localStorage.setItem('cliente', this.approach.client.id)
    localStorage.setItem('approach', this.id)
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
  }

这是一段混乱的旧代码，很难弄清楚到底发生了什么。让我们将其分解为更易于管理的东西。首先，让我们将存储分解为它自己的方法：

打字稿

approved(): void {
  this.writeToLocalStorage();
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}

private writeToLocalStorage(): void {
  localStorage.setItem('encargado', this.approach.responsable.id);
  localStorage.setItem('cliente', this.approach.client.id);
  localStorage.setItem('approach', this.id);
}

现在，让我们打破对话框处理：

打字稿

private showProjectFormDialog(): void {
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}

此时，我们可以如下设置我们的批准消息：

打字稿

approved(): void {
  this.writeToLocalStorage();
  this.showProjectFormDialog();
}

现在，让我们回到整理对话框处理。现在，这是一堆缩进和订阅。我了解 TypeScript，但我无法一眼看出其中发生了什么，所以我无法想象如果该语言的新手接手它会是什么样子。我要一口气把整个事情分解，给它一些秩序。

打字稿

private showFormDialog(): void {
  const dialog = this.dialog.open(ProjectFormComponent);
  dialog.afterClosed().subscribe(result => {
    this.afterProjectFormClosed();
  });
}

private afterProjectFormClosed(): void {
  this.rest.get(`/project?approach={this.id}`).subscribe((data: any) => { updateProject(data); });
}

private updateProject(data: any): void {
  console.log(data);
  if (data.length > 0) {
    addProjectToStatus(data);
  }
  else {
    console.log(`Did not fetch the project at /project?approach={this.id}`);
  }
}

private addProjectToStatus(data: any): void {
  this.rest.put(`/project?approach={this.id}`).subscribe(
    (result:any) =>{ this.router.navigate(["/proyecto/" + data[0].id]); }
     ,error=>{ console.log('error'); });
}

现在，我可以看到代码在做什么。存在问题的最明显的可能性是具有该 id 的记录不存在。这就是我首先要检查的。我要考虑的第二件事是向其余调用部分添加错误处理，看看我是否收到类似 404 错误或 5xx 状态的信息。现在，代码有一个天真的假设，即订阅总是会返回良好的信息。不管怎样，如果你想知道如何将一整堆代码变成可以轻松调试的东西，我希望对你有所帮助。

注意：我真的不喜欢 any 作为数据类型，但我不知道正在返回值，所以我将其保留于此，并且我添加了分号和 void 类型，因为我喜欢一致的代码。