@QuadionTech AngularJS Promises: Common Traps and Misuses
When I started in front-end development using AngularJS, I found it very hard to understand how asynchronous programming works.
I clearly remember that one of the first things I did was to look into AngularJS documents and investigate both $http and $q service. In this article, I will provide some examples I think will be very helpful for all those developers that need to efficiently manage AngularJS promises and thus avoid falling into traps.
Most of the beginners try to use an asynchronous call like a synchronous one spending a lot of time trying to figure out what’s wrong. Here’s an example I’ve seen several times:
In this case, the developer needs to place in the scope a list of airports which is trying to get from the server. Instead, he will get a promise object because $https.get is an asynchronous call.
Looking up the documents, I found that a promise object has a .then method that considers 2 functions as parameters . The first function passed as a parameter will be excecuted if the request succeeds, the other one if the request fails (these functions are usually called success and error callbacks). It’s likely that developers try to get a result from the http request by returning it from the success callBack.
But it doesn’t work either. The getAirports function doesn’t return anything because the return data statement is not returning from getAirports() but from the asynchronous success callBack.
As a developer you might think that if you assign the httpRequest result to a variable in the success callBack and then you return that variable at the end of the method it will work…
--- Google Ad ---
---
But no. It will return undefined.
If you debug the getAirports() function, you’ll notice that the return statement will be executed before the variable airports is populated. But why? Well…the answer is that the callBack will be triggered after the server responds and this will take a while.
The correct way is to return a promise and wait for the results in the controller using the .then method
Finally, I would like to mention 2 ways of creating promises :
- Using $http service
- Using $q service
Although both services will create promises that contain a .then method, the promises created using the $http service will contain some extra methods such as .success and .error which are not important for the purpose of this post.
Chaining promises
Now that we know the basics about angular promises it is time to go more deeply and understand how they are chained. Most of the time you are going to use promises, you will need to chain or combine them.
Let’s say we need to know if there are any flights to New York programmed to depart today and, if there is a flight, verify if the weather will be ok to land in New York.
As you can see the request to verify the wheather is inside the success callback of the request to verify if there is any flight. This is because we need to be sure that the getFlights request is completed before we call the isWheatherOk . Remember that we only want to made a request to the server to verify the wheater if there is a flight that will land in the airport.
No hay comentarios.