How to pause code till .then function is executed in AngularJS

Question

While I am loading an AngularJS file my code is getting executed completely before the code in .then function completes its execution. How to pause code till the code in .then function executes. I mean I want to make synchronous ajax calls, I used to use async: false in jQuery. I want to know how to do that in angularJS.

Thanks in advance

Below is my AngularJS code

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

app.controller("Ctrl",Ctrl);

function Ctrl($http){
    var self=this
    ajaxCall();
    function ajaxCall(){

    return $http.get('/getData/')
        .then(function(data){

            // this below alert should come before the last alert 

            alert(" should execute first then below alert")

            self.data=data      
        })  
    }       
    alert("getting executed first")  
}

Maybe you will find here an answer: https://stackoverflow.com/questions/28921127/how-to-wait-for-a-javascript-promise-to-resolve-before-resuming-function — SehaxX, Jul 09 '18 at 10:57

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Your ajaxCall() is returning a promise. So you can simply wait until it finished.

The $http API is based on the deferred/promise APIs exposed by the $q service. While for simple usage patterns this doesn't matter much, for advanced usage it is important to familiarize yourself with these APIs and the guarantees they provide.

AngularJS $http documentation

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

app.controller("Ctrl",Ctrl);

function Ctrl($http){
    var self = this;
    
    function ajaxCall(){

        return $http.get('/getData/')
            .then(function(data) {

                // this below alert should come before the last alert
                alert(" should execute first then below alert")

                self.data = data; 
            }
        );  
    }

    // You can use .then here, because ajaxCall returns a promise
    ajaxCall().then(function () {
        alert("getting executed first");
    })
}

If I do this my HTML page is getting loaded before getting the result from the promise. Basically, I want data that promise is returning before my HTML page gets loaded. — Mahideep, Jul 09 '18 at 11:49

score 0 · Answer 2 · answered Jul 09 '18 at 11:44

0

What if you chain promises?

function Ctrl($http, $q){

  var self = this;
  ajaxCall();

  function ajaxCall(){
    return $http.get('/getData/')
      .then(storeData)
      .then(proceed);  
  }

  function storeData(response) {
    alert("1st");
    self.data = response.data;
    return $q.when(self.data);
  }

  function proceed(data) {
    alert("2nd");
  }

}

answered Jul 09 '18 at 11:44

jsruok

545
7
10

I tried this but my HTML is getting loaded before I get the 1st and 2nd alert. Here I use the data which promise returns before loading HTML page for canvas tag to display charts. – Mahideep Jul 09 '18 at 11:57
Your canvas needs are good to know. Can you display a loading message before the data is fetched and the actual data when you've got it, like so: `
Loading...
` (assuming you use controllerAs syntax)? – jsruok Jul 10 '18 at 06:43

How to pause code till .then function is executed in AngularJS

2 Answers2