DevExtreme Angular - Intercept HTTP Requests

HTTP request interception in DevExtreme components might be useful for the following cases:

  • Intercept errors to display more informative messages to a user.

  • Inject an authentication token in the Authorization header.

  • Log API requests and responses for debugging or usage analysis.

  • Track upload progress and display a progress bar.

In Angular apps, you can use HttpInterceptor to intercept Ajax requests in DevExtreme components such as DataSource, FileUploader, and Map. This task requires that you import DxHttpModule.

NOTE
If you use DxHttpModule, Angular restricts access to XMLHttpRequest. This means you cannot get the XHR object in functions such as ODataContext.errorHandler, FileManager.fileSystemProvider.beforeAjaxSend, FileUploader.onUploadStarted, etc.

The following code snippet demonstrates how to intercept a request in DataSource: