es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Angular – Cómo utilizar correctamente Promise en lugar de setTimeOut Angular – Cómo usar adecuadamente Promise en lugar de setTimeOut

Angular – Cómo utilizar correctamente Promise en lugar de setTimeOut Angular – Cómo usar adecuadamente Promise en lugar de setTimeOut

30 Jul, 2023 Programación

Estoy tratando de llamar dos funciones consecutivas, si utilizo “setTimeOut”, funciona como se esperaba. Pero estoy tratando de cambiar el código para usar “Promises”. A continuación se muestran partes de mi código:

public getCustomFieldsData() {
  return new Promise<void>((resolve, reject) => {
    this.originalData = [];
    this.customFieldsService.getCustomFields(this.columnList, this.pageNumber, this.pageSize, null).subscribe(res => {
      if(res) {
        this.ngxSpinner.hide();          
        this.cfData = res;
        this.originalData = this.cloneData(this.cfData.customAttributes);         
        this.gridData = {
          data: this.cfData.customAttributes,
          total: this.cfData.totalCount
        }        
      }
    });
    resolve();
  });
}

public editRows(grid) { 
  this.formGroups.markAllAsTouched(); 
  (this.formGroups.get('items') as FormArray).clear();
  let currentRow = (this.pageNumber - 1) * 20;
  let rows: any = grid.data.data;

  for (let i = 0; i < rows.length; i++) {
    const formGroup = this.createFormGroup(rows[i]);
    this.formGroup = formGroup;
    (this.formGroups.get('items') as FormArray).push(formGroup);        
    grid.editRow(currentRow, formGroup, {skipFocus: true});
    currentRow++;
  }
} 

public confirmSave(shouldSave: any, grid): void { 
  if (shouldSave == false) {
    // this.getCustomFieldsData();
    // setTimeout(() => {
    //   this.editRows(grid);
    // }, 500);  
    this.getCustomFieldsData().then(res => this.editRows(grid));
  } 
}

Entonces, hay 3 funciones y en la función “confirmSave()”, estoy llamando a otras dos funciones que deben ejecutarse una después de la otra. Primero necesito obtener los datos llamando al método “getCustomFieldsData()”, y cuando esta función completa su ejecución, luego quiero llamar al método “editRows()”.

Si no uso “Promise” y uso “setTimeOut”, funciona, pero siento que no es consistente. Entonces, intenté usar “Promise” que no está funcionando. Ni siquiera veo errores en la consola.

¿Alguien puede sugerir si hay algo mal en el código? Gracias.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En el código proporcionado, se llama a resolve() inmediatamente después de la suscripción a customFieldsService.getCustomFields(), lo que significa que la promesa se resuelve antes de que finalice la operación asíncrona. Por lo tanto, el método editRows() se ejecutaría antes de que el método getCustomFieldsData() complete su ejecución.

    Para utilizar correctamente las promesas, resolve() debe ser llamado dentro de la función de devolución de llamada de la suscripción, después de que gridData haya sido asignado. Además, el método reject() debe ser llamado dentro de la función de devolución de llamada de error si la suscripción falla.

    Aquí tienes una versión actualizada del método getCustomFieldsData():

    public getCustomFieldsData(): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    this.originalData = [];
    this.customFieldsService.getCustomFields(this.columnList, this.pageNumber, this.pageSize, null).subscribe(
      res => {
        this.ngxSpinner.hide();
        this.cfData = res;
        this.originalData = this.cloneData(this.cfData.customAttributes);
        this.gridData = {
          data: this.cfData.customAttributes,
          total: this.cfData.totalCount
        };
        resolve();
      },
      error => {
        reject(error);
      }
    );
  });
}

    Ahora, en el método confirmSave(), puedes utilizar la cadena de promesas de la siguiente manera:

    public confirmSave(shouldSave: any, grid): void {
  if (shouldSave == false) {
    this.getCustomFieldsData()
      .then(() => {
        this.editRows(grid);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

    De esta manera, el método editRows() solo se llamará cuando el método getCustomFieldsData() haya completado su ejecución.

Comments are closed.