Asynchronous print commands about react-native-thermal-receipt-printer-image-qr

[nishit-g]

Yes, let me try to get the print functionality in other function w/o async await.

Thanks, I think this will fix it.

[nishit-g]

Thanks a lot @thiendangit ❤️

[nishit-g]

Hey @thiendangit, sorry my code logic is at fault here, the printOrder.map(.... function returns Array of Promises which is then executed "Parallely" by Promise.all(... function.
Due to this the printOrder gets messed up.

Again sorry for reopening the issue.

[nishit-g]

Hey @jagruticodoffer
I think your print Array is like this by the end

[asyncPrintText(), asyncPrintBill()]

This will run parallely, which is giving asynchronous printing 👇

Promise.all([task1(), task2()])

For running them sequentially you need something like this 👇

Promise.all([ await task1(), await task2() ])

Or you could use our old for loop friend 😉 where you can traverse your array

for(let task in printArray){
  await task();
}

Hope this helps 👍

[thiendangit]

@nishit-g are you using async await ?

[thiendangit]

@nishit-g i just got the above problem when i try to print multiple bill by loop

[thiendangit]

@nishit-g but i resolved by using https://stackoverflow.com/questions/33438158/best-way-to-call-an-asynchronous-function-within-map

[nishit-g]

Hey @thiendangit , I tried it with the link you provided still it's the same issue, the print order gets messed up.
Can you please provide your code snippet ?

Here are mine

  printTextLine = text =>
    new Promise((res, reject) => {
      Printer.printText(text);
      res();
    });

      await Promise.all(
        printOrder.map(async ({id, purpose}) => {
          if (id === 0) {
            await this.printTextLine(`${OFF_CENTER}${desc}`);
          } else if (id === 1) {
            await this.printTextInColumns(
              row1,
              h1ColWidth,
              h1ColAlignment,
              styleOptions,
            );
          } else {
            styleOptions.pop();
            await this.printTextInColumns(
              row2,
              h2ColWidth,
              h2ColAlignment,
              styleOptions,
            );
          }
        }),
      );

[thiendangit]

@nishit-g The link that I share only helps to print multiple bills at once!! i tested in tysso and epson. but i can't reproduce this error! What brand of printer are you using?

[jagruticodoffer]

hello @thiendangit I have created the asynchronous request as per the https://stackoverflow.com/questions/33438158/best-way-to-call-an-asynchronous-function-within-map but it wont work for me, still facing the same print order issue, event I have tried with async await.
here is my code snippets

let printArray = [];
 const asyncPrintText = text => {
   const printText = new Promise((resolve, reject) => {
     Printer.printText(text);
     resolve();
   });
   printArray = [...printArray, printText];
 };
 const asyncPrintBill = bill => {
   const printBill = new Promise((resolve, reject) => {
     Printer.printBill(bill);
     resolve();
   });
   printArray = [...printArray, printBill];
 };

 const asyncPrintColumnsText = (
   columnHeader,
   columnWidth,
   columnAliment,
   columnStyle,
 ) => {
   const printColumn = new Promise((resolve, reject) => {
     Printer.printColumnsText(
       columnHeader,
       columnWidth,
       columnAliment,
       columnStyle,
     );
     resolve();
   });

   printArray = [...printArray, printColumn];
 };

asyncPrintText(`${text}`);
asyncPrintBill(`${bill}`);
asyncPrintColumnsText(header, columnWidth, columnAliment, []);

 Promise.all(printArray).then(response => {
        console.log('Promise all', response);
 });

I have POS Receipt Printer Bluetooth 80mm Direct Thermal Printer.

Thank you!

[jagruticodoffer]

@nishit-g Thank you for your reply can you please share me the structure of task1()

[nishit-g]

task1() for you would be asyncPrintText()
task2() would be asyncPrintBill()

Promise.all([ await asyncPrintText(), await asyncPrintBill() ]).then(.....rest of the code

[codoffer]

Hello, @nishit-g @thiendangit @jagruticodoffer I am facing the same issue with column printing. I have used promises and async/await

I have created 3 separate common functions for printing and using these for sending text/image/columnText

asyncPrintBill = bill => {
    return new Promise((resolve, reject) => {
      this.Printer.printBill(bill);
      resolve();
    });
  };

  asyncPrintColumnsText = (
    columnHeader,
    columnWidth,
    columnAliment,
    columnStyle,
  ) => {
    return new Promise((resolve, reject) => {
      this.Printer.printColumnsText(
        columnHeader,
        columnWidth,
        columnAliment,
        columnStyle,
      );
      resolve();
    });
  };

  asyncPrintImage = image => {
    return new Promise((resolve, reject) => {
      this.Printer.printImage(image);
      resolve();
    });
  };

On printing screen - I have created multiple functions to craft a full bill (Function for Header, Function for Items, Function for footer, etc)

Below is a Header function -

printBillOrderInfo = () => {
    return new Promise((resolve, reject) => {
      const paymentMethod = this.order?.method
        ? orderPaymentMethods?.[this.order.method] !== undefined
          ? orderPaymentMethods?.[this.order.method]
          : ' - '
        : ' - ';
      const userName =
        this.order?.user?.name !== null ? this.order?.user?.name : ' - ';
      const pickupMethod = orderPickupMethods?.[this.order.action];
      const orderRemark = this.order?.note !== null ? this.order?.note : ' - ';
      const orderDate = codoDateformat(this.order?.create_at);
      Promise.all([
        printerService.asyncPrintColumnsText(
          ['Order Id : ', `${this.order?.order_number}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Method : ', `${pickupMethod}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Payment Method : ', `${paymentMethod}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Note : ', `${orderRemark}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['User : ', `${userName}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Order Date : ', `${orderDate}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          [`${DOUBLE_DASHED_LINE}`],
          [52],
          [ColumnAliment.LEFT],
          [''],
        ),
      ]).then(() => {
        resolve();
      });
    });
  };

In the final - Printing function (Calling by print button press), I am again calling promise.all() for asynchronous printing, but all is in vain. It's not working.

print = () => {
      Promise.all([
        this.printBillHeader(),
        this.printBillOrderInfo(),
        this.orderProductHeader(),
        this.orderProductTable(),
        this.orderTotal(),
        this.deliveryAddressPrint(),
        printerService.asyncPrintImage(
          `${MEDIA_URL + this.branch?.shopInfo?.site?.logo}`,
        ),
        printerService.asyncPrintText(
          `<C>Thank you for your visit</C>\n<C>Have a nice day</C>\n`,
        ),
      ])
        .then(() => {
          console.log('print receipt successfully.');
        })
        .catch(error => {
          showMessage({
            message: error?.message || 'Something went wrong while printing',
            type: 'error',
          });
        });
  };

Can you help me with this?

[nishit-g]

Hey @codoffer ,

Promises.all( asyncFunc1(), asyncFunc2() );  // This will run functions parallely, instead of serially.

// You can try using this for running inside functions serially
Promises.all( await asyncFunc1(), await asyncFunc2() ); // This will run functions serially

Can you try this ?

[codoffer]

@nishit-g Why are you adding await inside promise.all() array? I have solved this by adding timeout

#35

Thanks