Promises in angular

Question

Promises in angular

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a problem with asynchronism ...

I am trying to create a service in angular that gives me the data of an excel in json. I'm doing this with a library and it works well. my problem is that calling it as a service I leave it within a promise but within the flow there is a process that takes a bit and returns the data in undefined.

prueba(evt:any){
  var data:any;
  return new Promise((resolve, reject) => {
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length !== 1) throw new Error('Cannot use multiple files');

    const reader: FileReader = new FileReader();

//esta es la parte que tarda y es justo lo que necesito
    reader.onload = (e: any) => {

      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});

      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */
/*esta data es el dato que necesito*/
      data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 2}));
    }

   if(resolve) {
     resolve(data);
   } else {
      reject('Failure!');
   }
  });
}

Within my logic I think I need to leave a promise inside another and I have not been able to find information about it. I hope you can help me. Anyway, I appreciate your time.

javascript typescript angular promesas ecmascript-6

asked by Miguel Angel Gonzalez Jaimen 20.10.2018 в 05:58

source

2 answers

How do you do that by pressing enter on an html input, a php file is executed? Dynamic form

score 0 · Answer 1

For that case you can use Async / Await.

Await allows you to stop the execution flow until a promise is resolved and once resolved returns the result of that promise, that is, what you return with the resolve function of that promise. Keep in mind that to use the keyword await you must declare this function with the keyword async.

async prueba(evt:any){
  var data:any;
  const data = await new Promise((resolve, reject) => {
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length !== 1) throw new Error('Cannot use multiple files');

    const reader: FileReader = new FileReader();

//esta es la parte que tarda y es justo lo que necesito
    reader.onload = (e: any) => {

      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});

      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */
/*esta data es el dato que necesito*/
      data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 2}));

      resolve(data);
    }

   if(resolve) {
     resolve(data);
   } else {
      reject('Failure!');
   }
  });
}

score 0 · Answer 2

I appreciate your response. I made some changes to my code based on your answer but I could not make it work properly. Currently to get out of the problem I am using a timeOut but I need it to be correct, then I will send you the current status of my code. -

    onFileChange(evt: any) : any {
  return new Promise(result=>{
    // alert("bla");
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length !== 1) throw new Error('Cannot use multiple files');
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});

      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */
      this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 2}));

    };
    setTimeout(() => {
            result(this.data);
          }, 1000);

             reader.readAsBinaryString(target.files[0]);




  });

  }