Now the problem with the example we discussed in the previous section is that we have a promise function, but it doesn't take any input. This most likely is never going to be the case when we're using real-world promises. We'll want to provide some input, such as the ID of a user to fetch from the database, a URL to request, or a partial URL, for example, just the address component.
In order to do this, we'll have to create a function. For this example, we'll make a variable, which will be a function called asyncAdd:
var asyncAdd = () => {
}
This will be a function that simulates the async functionality using setTimeout. In reality, it's just going to add two numbers together. However, it will illustrate exactly what we need to do, later in this chapter, to get our weather app using promises.
Now in the function, we will take two arguments, a and b, and we'll return a promise:
var asyncAdd = (a, b) => {
};
So, whoever calls this asyncAdd method, they can pass in input, but they can also get the promise back so that they can use then to sync up and wait for it to complete. Inside the asyncAdd function, we'll use return to do this. We'll return the new Promise object using the exact same new Promise syntax we did when we created the somePromise variable. Now this is the same function, so we do need to provide the constructor function that gets called with both resolve and reject, just like this:
var asyncAdd = (a, b) => {
return new Promise((resolve, reject) => {
});
Now we have an asyncAdd function, which takes two numbers and returns a promise. The only thing left to do is to actually simulate the delay, and make the call to resolve. To do this, we'll simulate the delay using setTimeout. Then we'll pass in my callback function, setting the delay to 1.5 seconds, or 1500 milliseconds:
return new Promise((resolve, reject) => {
setTimeout(() => {
}, 1500)
});
In the callback function, we'll write a simple if-else statement that will check if the type of both a and b is a number. If it is, great! We'll resolve the value of the two numbers added. If they're not numbers (one or more), then we'll reject. To do this, we'll use the if statement with the typeof operator:
setTimeout(() => {
if (typeof a === 'number')
}, 1500);
Here, we're using the typeof object to get the string type before the variable. Also, we're checking whether it's equal to a number, which is what will come back from typeof when we have a number. Now similar to a, we'll add typeof b, which is also a number:
if (typeof a === 'number' && typeof b === 'number') {}
We can add the two numbers up, resolving the value. Inside the code block of the if statement, we'll call resolve, passing in a + b:
return new Promise((resolve, reject) => {
setTimeout(() => {
if (typeof a === 'number' && typeof b === 'number') {
resolve(a + b);
}
}, 1500);
This will add the two numbers up, passing in one argument to resolve. Now this is the happy path when both a and b are indeed numbers. If things don't go well, we'll want to add reject. We'll use the else block to do this. If the previous condition fails, we'll reject by calling reject('Arguments must be numbers'):
if (typeof a === 'number' && typeof b === 'number') {
resolve(a + b);
} else {
reject('Argumets must be numbers');
}
Now we have an asyncAdd function that takes two variables, a and b, returns a promise, and anyone who happens to call asyncAdd can add a then call onto the return result to get that value.