आफ्टरक्लोज्ड() के साथ समस्याएँ

चूंकि यह प्रश्न लंबे समय से निष्क्रिय है, इसलिए यह देखने लायक है कि समस्या क्या है, इसका स्वयं निदान करने के लिए इससे कैसे निपटा जा सकता था। आइए कोड को “जैसा है” लें, और देखें कि समस्या को थोड़ा सा पुनर्व्यवस्थित करने से डिबगिंग कैसे सरल हो जाएगी। सबसे पहले, वर्तमान में कोड इस प्रकार दिखता है:

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();
}

अब, आइए संवाद प्रबंधन को व्यवस्थित करने पर वापस आते हैं। अभी, यह इंडेंटेशन और सब्सक्रिप्शन की गड़बड़ी है। मैं टाइपस्क्रिप्ट जानता हूं और मैं एक नज़र में पता नहीं लगा सकता कि वहां क्या चल रहा है, इसलिए मैं कल्पना नहीं कर सकता कि अगर भाषा में नया कोई व्यक्ति इसे सीख ले तो क्या होगा। मैं इसमें कुछ आदेश देकर पूरी चीज़ को एक ही बार में तोड़ने जा रहा हूँ।

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'); });
}

अब, मैं देख सकता हूँ कि कोड क्या कर रहा है। समस्या होने का सबसे स्पष्ट कारण यह है कि उस आईडी वाला रिकॉर्ड मौजूद नहीं है। सबसे पहले मैं इसी की जाँच करूँगा। दूसरी चीज़ जो मैं देख रहा हूँ वह यह देखने के लिए बाकी कॉल भाग में त्रुटि प्रबंधन जोड़ना है कि क्या मुझे यहाँ 404 त्रुटि या 5xx स्थिति जैसा कुछ मिल रहा है। अभी, कोड में एक भोली धारणा है कि सदस्यता हमेशा अच्छी जानकारी के साथ वापस आने वाली है। वैसे भी, मुझे आशा है कि यदि आप जानना चाहते हैं कि कोड के पूरे ढेर को किसी ऐसी चीज़ में कैसे बदला जाए जिसे आसानी से डीबग किया जा सके तो इससे आपको मदद मिलेगी।

नोट: मुझे वास्तव में डेटाटाइप के रूप में कोई भी पसंद नहीं है, लेकिन मुझे नहीं पता कि मान लौटाए जा रहे हैं इसलिए मैंने इसे वहीं छोड़ दिया है, और मैंने सेमी-कोलन और शून्य प्रकार जोड़े हैं क्योंकि मुझे लगातार कोड पसंद है।