Custom AJAX implementation / adapters

[AlekseyMartynov]

Frequent question is how to use Angular's HttpClient for AJAX.

• https://devexpress.com/issue=T693850
• https://devexpress.com/issue=T638106
• https://devexpress.com/issue=T661619
• https://devexpress.com/issue=T661551
• HttpInterceptor with DevExtreme.AspNet.Data doesn't work Angular 6 #309

[AlekseyMartynov]

Did some research.
This is likely to be done via the DevExtreme's core/utils/ajax by injecting a custom sendRequest function.

Experimental implementation:
https://github.com/DevExpress/DevExtreme.AspNet.Data/tree/experiment/ng-http-client/experiments

[pwen090]

@AlekseyMartynov is there any planned data on support proper Angular HttpClient usage? We use Angular http interceptors extensively in our project so this is a major problem in switching from Telerik (which is all native angular code) to DevExtreme. I see you have an experimental branch but wondering when this would be released/fixed? thank you!

[AlekseyMartynov]

@pwen090
The task is currently in the devextreme-angular team Backlog. No due date is set. However, the experimental implementation linked above is self-contained and pluggable. If you want to use it in your project I'll be happy to assist.

[Bykiev]

@AlekseyMartynov, and what about AngularJS? Right now we're using a tweaked version of dx.aspnet.data.js where all ajax calls replaced with $http service...

[AlekseyMartynov]

@Bykiev currently no plans to support $http

[Bykiev]

@AlekseyMartynov, thx, but you should consider to implement universal mechanism to bypass this issue, it's really annoying to support our own custom implementation, because interceptors are really useful in Angular/AngularJS apps.

[AlekseyMartynov]

@Bykiev

you should consider to implement universal mechanism to bypass this issue

If DevExtreme is referenced as a module (via require/define) then you can override the AJAX implementation as I did in my experimental branch:

DevExtreme.AspNet.Data/experiments/ng-http-client-fixture.js

Lines 21 to 29 in 37e4de7

	ajax = require("devextreme/core/utils/ajax");
	createNgHttpClientSendRequestFunc = require("./ng-http-client-helper");
	ajax.inject({
	sendRequest: createNgHttpClientSendRequestFunc(
	createHttpClient(require("@angular/common/bundles/common-http.umd")),
	require("devextreme/core/utils/deferred").Deferred
	)
	});

If you use dx.all.js then I think we can expose ajax.inject there too.

[Bykiev]

@AlekseyMartynov, no, we're not using require/define, exposing ajax.inject seems very promising :) Do I understand correctly, currently it is not supported yet?

[pwen090]

@AlekseyMartynov how would we use the experimental code you linked to above in our regular Angular project?

[AlekseyMartynov]

@Bykiev

Do I understand correctly, currently it is not supported yet?

Correct. Without require/define, the ajax module is not visible. I discussed this with the team, and they agreed to expose it in a future release. We'll update this thread when it's done.

@pwen090
I'll prepare an example and share it here.

[AlekseyMartynov]

@Bykiev
We have just merged the related PR - DevExpress/DevExtreme#8881.
DevExpress.utils.ajax will be available in the next maintenance update.

[AlekseyMartynov]

@pwen090

Please check the sample app at https://github.com/DevExpress/DevExtreme.AspNet.Data.NgHttpClientSample.

[Bykiev]

@AlekseyMartynov, thx!

Do you have any sample how to use it with AngularJS?

[AlekseyMartynov]

@Bykiev

No, we don't. I can only suggest an outline:

// execute on app start
DevExpress.utils.ajax.inject({
    sendRequest: function(options) {
        var d = $.Defered();
        
        ...
        
        // on success
        d.resolve(responseBody, "success", xhr);
        
        // on error
        d.reject(xhr, "error");
        
        ...
        
        return d.promise();    
    }
});

xhr should be XMLHttpRequest or an object with at least the following members:

• status: number
• statusText: string
• getResponseHeader(name: string): string
• responseText: string

[Bykiev]

@AlekseyMartynov, do I understand you correctly, after injecting my logic into DevExpress.utils.ajax I can use it this way?

dataSource: DevExpress.data.AspNet.createStore({
            key: "OrderID",
            loadUrl: "api/Orders",
}),

If so, it's not working for me, sendRequest method is never called. My AngularJS implementation:

DevExpress.utils.ajax.inject({
  sendRequest: function (options) {
	var d = $.Deferred();

	var method = (options.method || 'get').toLowerCase();

	$http({
	  method: method,
	  url: options.url + '?' + $httpParamSerializer(options.data)
	})
	  .success(function (res) {
		d.resolve(res);
	  })
	  .error(function (err) {
		d.reject(err);
	  })

	return d.promise();
  }
});

[AlekseyMartynov]

@Bykiev Thanks for trying it out. Looks like the jQuery-based dx.aspnet.data script requires additional modifications to support custom AJAX. I'll check it and post an update.

[AlekseyMartynov]

@Bykiev Please try a custom version of dx.aspnet.data.js with [email protected] and let me know whether ajax.inject works with these versions.

[Bykiev]

@AlekseyMartynov, this version is working fine :)

[AlekseyMartynov]

@Bykiev Cool. These changes are included in 2.4.4. You can now upgrade and use the official build.

[natalie-o-perret]

Is it supposed to work with Axios?

[natalie-o-perret]

@AlekseyMartynov ?

[AlekseyMartynov]

Hello @ehouarn-perret.
Please clarify your question. Did you encounter an issue while trying to implement an Axios-backed adapter?

[natalie-o-perret]

I managed to make it work but it's kind clunky.

Will post something here later on.

[Bykiev]

@pwen090

Please check the sample app at https://github.com/DevExpress/DevExtreme.AspNet.Data.NgHttpClientSample.

Hi @AlekseyMartynov , this sample seems to be working incorrectly, because xhr value passed to resolved promise is always null. I've created a pull request

[pwen090]

Is there any update on when there will just be built in support for Angular instead of having to do the ng-http-client-helper.ts style workarounds?

[Bykiev]

Is there any update on when there will just be built in support for Angular instead of having to do the ng-http-client-helper.ts style workarounds?

+1 it will be cool to include it into angular-devextreme package

[AlekseyMartynov]

I wish I could have the built-in support too. Our DevExtreme framework integration team has this task on the list, but its priority is not very high because of the existing workaround. We'll make an announcement when the feature is ready. Thanks for all your help!

[onur-ozguzel]

Hi all;

Can you somehow implemented refresh-token operation with DevExtreme.AspNet.Data in Angular? I tried some ways but couldn' t succeed it. If we get an 401 error with a request created by DevExtreme.AspNet.Data, i cannot do the operations which i' ve already implemented in http.interceptor. (If we got an 401 error, generate a refresh-token request, if everything is ok, send the failed requests again)

[Bykiev]

@AlekseyMartynov, hello!

It seems with the latest version of devextreme such adapter is not being called anymore (issue with injecting). Can you please check it?

[AlekseyMartynov]

Hello @Bykiev

DevExtreme has changed the module structure in 21.1.
Please refer to https://devexpress.com/issue=T985868

You'll need to edit the import statements like in this commit.

[Bykiev]

Thank you!

[AppField]

Hello @AlekseyMartynov,

in the newest devextreme version the Deferred function is marked as deprecated.

The sample app (https://github.com/DevExpress/DevExtreme.AspNet.Data.NgHttpClientSample) still uses the Deferred function and is not updated to [email protected].

Is there already a new way how to use the HttpClient from Angular?

[raphael-hettich]

Any news on this matter by any chance ?

[ArsProgramma-private]

In all honesty feedback on this would be really important.
As it looks the workaround doesn't work with ODataStores and using a Promise inside the beforeSend-Callback doesn't work either.
As nowadays it is basically not possible to use any API without sending and refreshing tokens,
a solution is required urgently, using the HttpClient being the prefered one.