DevExpress
Custom AJAX implementation / adapters
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
- #309
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
@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!
@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.
@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, 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.
@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:
https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/37e4de79067d8ebfff45c4049e5108c552426370/experiments/ng-http-client-fixture.js#L21-L29
If you use dx.all.js then I think we can expose ajax.inject there too.
@AlekseyMartynov, no, we're not using require/define, exposing ajax.inject seems very promising :) Do I understand correctly, currently it is not supported yet?
@AlekseyMartynov how would we use the experimental code you linked to above in our regular Angular project?
@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.
@Bykiev
We have just merged the related PR - https://github.com/DevExpress/DevExtreme/pull/8881.
DevExpress.utils.ajax will be available in the next maintenance update.
@pwen090
Please check the sample app at https://github.com/DevExpress/DevExtreme.AspNet.Data.NgHttpClientSample.
@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
@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();
}
});
@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.
@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.
Hello @ehouarn-perret. Please clarify your question. Did you encounter an issue while trying to implement an Axios-backed adapter?
I managed to make it work but it's kind clunky.
Will post something here later on.
@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
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?
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
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!
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)
@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?
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.