How to catch exception from Ajax?

[Tuy Mai]

I'm trying to perform a CRUD operation using the sample code at:

https://ej2.syncfusion.com/react/documentation/grid/data-binding/#perform-crud-operations

To simulate a network error, I provide a non-existing endpoint to Ajax.  When I do a CRUD operation, the page will hang and show a spinning red circle.  My question is, how to catch and handle this error.  Below are the relevant info from the browser log:

====

Uncaught (in promise) Error: Not Found
    at Ajax.stateChange (ajax.js:138)
    at XMLHttpRequest._this.httpRequest.onreadystatechange (ajax.js:69)

Ajax.stateChange @ ajax.js:138
_this.httpRequest.onreadystatechange @ ajax.js:69
Promise.then (async)
dataSourceChanged @ MyClass.tsx:66

====

I try 'try - catch' block, but that does not work.

public dataSourceChanged(state: DataSourceChangedEventArgs): void {

  try {

    if (state.action === 'add') {

      this.orderService.addRecord(state).then(() => { if(state.endEdit) state.endEdit() });

    } else if (state.action === 'edit') {

      this.orderService.updateRecord(state).then(() => { if(state.endEdit) state.endEdit() });

    } else if (state.requestType === 'delete') {

      this.orderService.deleteRecord(state).then(() => { if(state.endEdit) state.endEdit() });

    }

  } catch(err)

  {

    // execution never reaches this point.

    console.log("Exception in dataSourceChanged:", err);

    if(state.endEdit) state.endEdit();  // must check for null to avoid webpack complaining about invoking

  }

}

[Tobias Koller]

hi,

usually when using promises there should be two callbacks.

like:

this.orderService.updateRecord(state).then(()=>{alert('everything ok.')}, (reason)=>{alert('something went wrong');});

The second is the one you are looking for.

refer to this:

Promise.prototype.then() - JavaScript | MDN (mozilla.org)

[Rajapandiyan Settu]

Hi Tuy, 

 

Thanks for contacting Syncfusion support. 

 

By using below code example, you can get the exception when execute the promises. 

 

 

 

function dataSourceChanged(args) { 

  if (state.action === 'add') { 

    // execute your service to perform ADD operation in it 

    crudService.addRecord(state).then( 

      () => {}, 

      (error) => console.log(error), 

      () => { state.endEdit(); } 

    ); // the second function is used to get the exception 

  } else if (state.action === 'edit') { 

    // execute your service to perform EDIT operation in it 

    crudService.updateRecord(state).then( 

      () => { state.endEdit(); }, 

      (e) => { grid.closeEdit(); } 

    ); 

  } 

} 

 

 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Tuy Mai]

Adding the second callback works very well.  Thanks.

[Rajapandiyan Settu]

Hi Tuy, 

 

We are glad that you have achieved your requirement with the provided solution. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rajapandiyan S