Most projects you work on may have a lot of asynchronous code, which is a code that will run at a different point in time. With a lot of callback functions, that can lead to a long wait time before your code can run completely. Promises can streamline your code and reduce the wait time. Promises will run at a later point in time allowing the rest of the code to run smoothly while reducing the use of callbacks used in your code. You might be wondering, why promises were
created?
Promises History
The term promise was proposed in 1976 by Daniel P Friedman and David Wise. It means ‘doing something at a later time’. It was implemented in the coding language allowing code to run at a later point in time. It already comes with JavaScript so there’s no need to download it. You might be wondering why promises were added to the coding language. Because some lines of code are asynchronous, like requesting data From YouTube for a specific video, it may take some time before you can get that data. Even if the line of code is not asynchronous, just having multiple callbacks can cause your code to run slower. Though callbacks are helpful, some functions are located in another file. Meaning that when that function runs it probably be called in a different file where that callback is located.
Code Example
Promises return one of three states
1.Pending: neither fulfilled nor rejected
2.Fulfilled: the code ran perfectly
3.rejected: the code failed
1.To make a promise you need to use the new keyword and then instantiate a promise. Then use a callback function as an argument that takes in two parameters resolve and reject.
let testP = new Promises((resolve, reject) => {
});
2.Set some type of condition to run resolve or reject. Then pass a
value to the resolve/reject function calls
let testP = new Promises((resolve, reject) => {
var bol = true;
if(bol){
resolve(‘success’);
}else{
reject(‘failed’);
}
});
3.Call the promises then use the .then method to run some code if the promises were successful and .catch if there was an error. Never put ; on a .then call if you're using a .catch. Because it will cause an error
testP()
// .then() takes in a function that takes in a parameter that equal
//the result of the promise that ran successfuly
.then((string)=> console.log('it was a ' + string)
//same as .then but will only run when there is an error, the //parameter that is used is the error the code ran into
.catch((string)=> console.log('it was a ' + string);
Examples
youTubeSearch(url){
return fetch(url)
//.json is a function that turns any data into javascript data
.then((data)=> data.json())
.catch((error)=>console.log('ERROR: ' + error));
};
A fetch request is like an asynchronous GET request. It will request data from YouTube and then turn that data into readable javascript data. The code will then return that data if there is no error. But if there is something wrong with the data, like being undefined, it will send an error message. If you want information on get requests, check out this blog https://dev.to/gagecantrelle/the-basics-of-ajax-3m6
//////callbacks
function getData (data, cb){
dataSearch(data, cb) //run a fetch request
}
function logData (data){
console.log(data)
recordData(data)
}
function recordData (data){
stoageFunction(data, 25, logData)
}
//////promises
p(data)
.then((data)=>console.log(data))
.catch((error)=>console.log('ERROR: ' + error))
Promises can lessen the amount of code you will need to write opposed to using callback functions to run asynchronous code. Depending on what the async function is doing, your code could take up a lot of space if it relies on multiple callback functions. It can also help with functions that can take some time to run, like a GET request. Since the data you're requesting could be from some website It might take some time before you get it. Another reason to use it is that a function might not have the time to wait for that data. This can lead to some errors or some data just becoming undefined.
Top comments (0)