Skip to main content
Image for post: AngularJS promises for async requests

AngularJS promises for async requests

Waiting the response

When you start to develop an Angular JS application in the real world you will soon have to handle REST calls. When you call a service, you have to wait for the response. There can be a delay and the page is not always ready to show it. The Angular promise library helps you to 

Tools

  • Lodash, a modern JavaScript utility library delivering modularity, performance & extras, Lodash for AngularJS
  • Bluebird JS, full featured promise library with unmatched performance
  • RESTAngular

Database ORM

Do you need an ORM for your database operations with NodeJS?

Example: playing with the SWAPI, the Star Wars API

Let's see a small and working example about using the Swapi "fake" APIs. Here I make 3 different request and the response of every single request is available when the server returned the result:


<!DOCTYPE html>
<html>
<head>
   <script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body ng-app="myModule" ng-controller="HelloCtrl">

<p>{{ people.person1 | json }}</p>
<p>{{ people.person3 | json }}</p>
<p>{{ people.starship9 | json }}</p>

<script>
angular.module('myModule', [])
.controller('HelloCtrl', function($http, $scope) {

   var people = {
       person1: '',
       person3: '',
       starship9: ''
   };

   var baseApiUrl = 'http://swapi.co/api/';
   
   $http.get('http://swapi.co/api/people/1/')
       .then(function(response) {
           people.person1 = response.data;
           return $http.get('http://swapi.co/api/people/3/');
       })
       .then(function(response) {
           people.person3 = response.data;
           return $http.get('http://swapi.co/api/starships/9/');
       })
       .then(function(response) {
           people.starship9 = response.data;
           return;
       });
       
   $scope.people = people;

   // console.log( people );

});
</script>
</body>
</html>

ECMA Script 7 await

Here I have found a very interesting article about using ES7 and the new await feature. This new feature will allow you to skip the then and check the result more effectively.

 

Share this post

This website and/or any sub domains use cookies to understand how you to improve your experience.