AngularJS如何仅在解决承诺后执行代码？ （带矩形）

Question

This might be a nooby question but I still haven't been able to get my head around promises and specifically how to write code with them. (I've read several articles but most of them are abstract and I simply haven't written enough to have a clear picture) I've got an AngujlarJS application that gets data through a http request to another server which sends a promise at first. I've been able to retrieve the response from the promise and use it in my app. However because my code is poorly written. It executes other code before the promise is resolved leading to problems. It starts loading the page before it has the data.

what i have is:

var userTotals = *http request which returns a promise

$scope.data = userTotals.$object

//code that does someting with $scope.data

What i need is (I think)

var userTotals = *http request which returns a promise

$scope.data = userTotals.$object.
  beforethisresolves(function{ 
     show fancy loading icon or something })
  .whenthis resolves(function{
    //code that does someting with $scope.data
  }

however I can't get the syntax correct.

Answer 1

This is what it looks like in general:

var promise = $http.post('/url');

console.log('Request started');

promise.then(function(result) {
  console.log('Success');
  console.log(result);
}, function() {
  console.log('Failure');
});

In fact, $q AngularJS documentation helped me a good deal to get my head around promises concept.

Hope this helps!

Answer 2

var successCallback = function(){//...};
var errorCallback = function(){//...};

$http
 .post('url', data)
 .success(successCallback)
 .error(errorCallback);

//OR

$http
 .post('url', data)
 .then(successCallback, errorCallback);

Answer 3

Assuming that you're using Bootstrap modal you can do the following:

function openModalWithProgressIndicator(deferred) {
  const progressModal = $uibModal.open({
    templateUrl: 'templates/modals/progress.html',
    backdrop: 'static'
  });
  return deferred.then(function (value) {
    return value;
  }).finally(function () {
    progressModal.close();
  });
}

The deferred argument passed to this function is a promise. That said you can now do the following:

const deferred = $http.post('http://somewhere/data', {foo: 'bar'});

openModalWithProgressIndicator(deferred)
  .then(function (httpResponse) {
    // do sth with httpResponse.data
  }).catch(function (error) {
    // do sth with error
  });

So the main point to note is the finally callback that's always executed.