how to create synchronous using $http in angular.js?

Question

I am beginner in java script and does not understand how to create synchronous Ajax call using $http object if anybody have idea please guide me, how i can make Ajax call by $http sychronously

my code as follow -

var AjaxModule = angular.module('AjaxModule',[]);
AjaxModule.controller('AjaxController',function($scope,$http){
    var path ="http://localhost/services_ajax/";
    var serviceName = 'customers'; 
    var response = $http.get(path+serviceName);
    response.success(function(data){
        $scope.list = data;
    });
});

The $http service returns a promise, therefore I don't think that you can configure it to make a synchronous call... However, I can't think of a single case where I would want my app to stop until I get a response from the server. — Josep
– Josep, Commented Oct 11, 2014 at 19:17
becouse i have set DataTable rows by iterating $scope.list in html all html generate properly but DataTable search is not working as dataTable call before generating the table rows due asynchronous ajax request — Nilesh Nartam
– Nilesh Nartam, Commented Oct 11, 2014 at 19:24

Georgi Naumov · Accepted Answer · 2014-10-11 23:12:49Z

2

You can not make a synchronous request using $http service. It is hard coded to be asynchronous in the service code. You can, however, make your own synchronous service.

var myApp = angular.module('myApp', []);

myApp.service('synchronousService', [function () {
    var serviceMethod = function (url) {
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            throw new Error("Your browser don't support XMLHttpRequest");
        }

        request.open('GET', url, false);
        request.send(null);

        if (request.status === 200) {
            return request.responseText;
        }
    };
    return serviceMethod;
}]);

myApp.controller('AppCtrl', function ($scope, synchronousService) {
    var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20%28%22AAPL%22%29&env=store://datatables.org/alltableswithkeys";
    alert(synchronousService(url));
});

Here is working jsfiddle: http://jsfiddle.net/zono/uL0e1j3e/18/

Just to say that the synchronous request is a very bad idea.

edited Oct 11, 2014 at 23:12

answered Oct 11, 2014 at 19:25

Georgi Naumov

4,2314 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Josep Over a year ago

I'm not sure that this service will work properly across all different browsers.

Georgi Naumov Over a year ago

This is just a example. I will improve answer.

Josep Over a year ago

Still, that wouldn't work with IE9 (for example). The real deal here is that the OP needs to understand that Angular doesn't provide that option for a reason, which is that Angular apps are meant to work with async functions and promises.

Georgi Naumov Over a year ago

I never said that this will work for old IE. Does not matter. I improved it. I already says that the synchronous request is a very bad idea. Edit: Whys is this down vote?

Josep Over a year ago

Since Angular does support IE9 I think that you should have at least mentioned that.

Giridhar Yampalwar · Accepted Answer · 2014-10-12 01:53:28Z

you can use the promise concept of angular. promise provide the synchronous facility. i demonstrate you to by giving the demo example

var app = angular.module("myApp",[ ]);

app.controller("ctrl",function($scope,$q,$timeout){

var task1 = $q.defer();
task1.promice.then(function(value){
       // write a code here for your task 1 success
} ,function(value){
       // write a code here for your task 1 error
});

var task2 = $q.defer();
task2.promice.then(function(value){
      // write a code here for your task 2 success
} ,function(value){
     // write a code here for your task 2 error
});

$q.all([task1.prpmice,task2.promice])
     .then(function(){
             // write a code which is executed when both the task are completed
    } ,function(){
            // write a code which is executed when some of the task are rejected
});

}

the above code will help you to understand the promice concept of angular

Collectives™ on Stack Overflow

how to create synchronous using $http in angular.js?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related