Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

How JavaScript Promises Work

Sunday, October 15th, 2017 by Servage

javascript-codeA promise is an object that represents an asynchronous action that is yet to be completed. Consider an HTTP request that loads the details of a user account. If the request is sent inside a promise, your application can continue to work on other tasks while the HTTP request is sent. When it completes, a function is called where you can handle the data that was returned. Let’s have a closer look at promises and what makes them so powerful.

Creating a Promise

A new promise can be created with the new keyword using the Promise class. Promises are created inside a function that performs asynchronous tasks. Therefore, you could have the following code inside an HTTP service: let promise = new Promise(function (resolve, reject) {}). The function takes an anonymous function as an argument with two arguments: resolve and reject. These two arguments are functions that are called when the asynchronous task is completed.

The resolve() function is called when the request has completed successfully. In case of an HTTP request, it this means a successful HTTP response, such as a 200 OK response. The reject() function is for the opposite: a failed asynchronous task, such as a 404 Not Found response. As an argument to these functions, you can pass any data you want to return, for example a session token if a user signs in. Doing so would look like this for a successful request: resolve(authToken).

Calling an Asynchronous Function

Now that we know how to create a promise, let’s also have a look at how to call a function that returns a promise. Having said that, the function that creates a new promise has to return the promise. In the example function above, it should return promise or simply return new Promise(…).

If the name of the function is signIn(), you could call it like this: signIn().then(function(successResult) {}, function(failureResult) {}). This function call also takes two anonymous functions as arguments. The first one will be called if the promise returns a successful response. In other words, when resolve() is called inside the promise. The second one is called when reject() is called. The data you pass as the argument inside resolve() and reject() is available in successResult or failureResult.

After this brief introduction to promises, you should be able to create simple asynchronous tasks in your applications. When working with promises, you should note that because a promise runs asynchronously, the response will not be available immediately. Instead, it will be resolved after the HTTP request has been sent and a response has been received. This takes some time, and if you try to assign the results of the function call to a variable, it will say the response is a Promise object until the promise is resolved with a real value. Keep this in mind since this is often confusing for the first time when using promises.

Categories: Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.