Basic Promises in AngularJS

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

An AngularJS promise is a mechanism that lets you defer a stated action or series of actions at an earlier point of time until you explicitly declare that promise to be fulfilled (or resolved). Promises are useful for asynchronous operations. This video introduces the basic way to declare and resolve promises.

John Lindquist: Before we get to the resolve property and routes, we need to talk about promises first. Angular ships with a library called "Q," which is a promised library. If I say, "q defer," I get a variable from that, and I say, "defer promise."

On this promise, and on the promise libraries you see around, there is function called "then," which will take a function. When this object is done being deferred, meaning that when you call defer resolve, it's going to fire off this.

We'll just say, "I promised I would show up." If I refresh, you can see it says, "I promised I would show up," because you are basically saying this is something that is going to happen in the future. This is when it happens in the future, and there you go. That's pretty much all the promises.

Something's going to happen in the future. You set "then" to show what one is successful. We'll talk about error-handling in other videos. There is ways of doing that as well.

Basically, once you have a promise set up, you can do a chain here, and we'll just add a couple more. We'll say, "me too" and "I." You can see one, "me too," and "I."

These are things that are going to happen in the future, and as the promises keep on resolving, they move on to the next. What you can do here is you can also pass in values. If I said, "resolve sword," I could do an alert here. I'm saying instead of "I promised I would show up," let's say, "you can have my," and then we'll say, "plus weapon." I need to add that as a parameter here.

We'll return "bow." Say, "weapon here." Say, "and my" plus "weapon," and then, we'll return "axe." Then, another last "weapon" in here and "my weapon." Now if I do this, you see what's going to happen. It's going to say, "sword," pass in "you can have my sword," return "bow," in the next promise or in the next, then "you can have my axe."

"You can have my sword, and my bow, and my axe." You can pass along these results and then handle them in the following "then" functions. That's basically all promises are. We'll get into more details about how you use them with the other libraries inside of angular as we go along, but just basically know that you create a defer object that you will eventually call resolve on.

You can set up this promise, and in a lot of things you do, you return that promise inside of Angular, and then it'll handle some of these "this-then" stuff for you. But if you are doing it manually like this, you can set up a chain of "thens" to fire as each one resolves.

That's pretty much it. This sets us up pretty well for diving into the resolve property and routing.

Statclip
Statclip
~ 8 years ago

Now that we have ES6 Promises if you are using a transpiler is there any reason to use the Angular version over ES6?

Markdown supported.
Become a member to join the discussionEnroll Today