[ad_1]
我有一个函数,当执行它时,有时导航有效,有时则无效(有时它进入 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 类型,因为我喜欢一致的代码。
[ad_2]
コメント