Angular等待后端更新响应时该怎么办？

Question

In the tutorial they have an example app where users can upvote things. When the user clicks upvote it makes a request to update the backend and it waits until this request is successful before it displays the effect to the user. The code is as follows:

$scope.incrementUpvotes = function(post) {
  posts.upvote(post);
};
o.upvote = function(post) {
  return $http.put('/posts/' + post.id + '/upvote.json')
    .success(function(data){
      post.upvotes += 1;
    });
};

The downside of this is that if you have slow internet there could be delay which would be a bad user experience.

The two options I see would be to either show a loading symbol to the user until it's successful. Show the effect of the upvote immediately while the backend sync happens in the background. The danger of this is if the request fails then the data between client and server will not be in sync.

I've also seen some people use an ajax queue like as follows:

Add queueing to angulars $http service

EDIT for an actual question:

What is the best practice here in terms of development and user experience? What do most people do and are there any pros/cons that I should be aware of?

Answer 1

With a few of my project I have done this for desirably fast UX. I have used both your examples, however if I use your second example, I include an error catch to resync the back and front end, notifying the user of the error. For example:

o.upvote = function(post) {
    post.upvotes += 1;
    return $http.put('/posts/' + post.id + '/upvote.json')
        .success(function(data){
            // don't have to do anything here
        })
        .catch(function(err){
            post.upvotes -= 1;
            // inform the user of the error
        });
};

My general rule of thumb is to use the first option if the interaction is very important, or the action is a prerequisite for a further action. I use the second option for independent events that the user expects to work quickly and seamlessly.