مشاكل مع بعد الإغلاق ()

نظرًا لأن هذا السؤال كان خاملًا لفترة طويلة، فمن المفيد النظر في كيفية معالجة هذا الأمر لتشخيص المشكلة ذاتيًا. لنأخذ الكود “كما هو”، ونرى كيف أن القليل من إعادة ترتيب المشكلة من شأنه أن يبسط تصحيح الأخطاء. أولاً، هذا هو شكل الكود حاليًا:

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

الآن أستطيع أن أرى ما يفعله الكود. المرشح الأكثر وضوحًا لوجود مشكلة هو أن السجل الذي يحمل هذا المعرف غير موجود. هذا ما سأقوم بالتحقق منه أولاً. الشيء الثاني الذي سأنظر إليه هو إضافة معالجة الأخطاء إلى جزء الاتصال المتبقي لمعرفة ما إذا كنت أتلقى شيئًا مثل خطأ 404 هنا، أو حالة 5xx. في الوقت الحالي، يحتوي الكود على افتراض ساذج بأن الاشتراك سيعود دائمًا بمعلومات جيدة. على أي حال، آمل أن يساعدك ذلك إذا كنت تريد معرفة كيفية تحويل كومة كاملة من التعليمات البرمجية إلى شيء يمكن تصحيحه بسهولة.

ملاحظة: أنا حقًا لا أحب أي نوع بيانات ولكني لا أعرف أنه يتم إرجاع القيم، لذا تركت الأمر عند هذا الحد، وأضفت فواصل منقوطة وأنواع باطلة لأنني أحب التعليمات البرمجية المتسقة.