Javascript Promises
@tkssharma
Agenda
- Callback Review
- Using a Promise
- Making a Promise
- Interesting Uses
- Quiz
Callbacks Don't Compose
- Holds a single value
- .then()
- In a state of
- Pending
- Resolved
- Rejected
What is a Promise?
- ES6
-
Native in:
- Node
- Chrome
- FF
- Safari
- Edge
Where I can use them?
- .then(onResolve, [onReject])
- .catch(onReject)
Using a Promise
Using a Promise
promise
.then((value) => {
//do something with value
})
.catch((err) => {
//handle an error
});
Using a Promise
promise
.then((value) => {
//do something with value
}, (err) => {
//handle an error
});
Errors and Rejections
promise
.then((value) => {
return 1;
})
.catch((err) => {
// won't be called
});
Errors and Rejections
promise
.then((value) => {
return Error("WAT");
})
.catch((err) => {
// won't be called
});
Errors and Rejections
promise
.then((value) => {
throw Error("WAT");
})
.catch((err) => {
// WILL be called
});
Chaining
promise
.then((value) => {
//do something with value
})
.then((value) => {
//do something else
})
.catch((err) => {
//handle an error
})
.then(() => {
// do something later
// even after an error
});
Composing
promise
.then((value) => {
return anotherPromise
.then(() => {
console.log("This will run first.");
});
})
.then(() => {
console.log("This will run second.");
})
.catch((err) => {
// handle an error in
// any of the promises
});
Composing
Promise.all([
promise1,
promise2,
promise3
])
.then((values) => {
// do something with all three
})
.catch((err) => {
// handle an error in
// any of the promises
});
Composing
var ids = [1, 2, 3, 4, 5, 6];
var promises = ids.map((id) => fetch(id));
Promise.all(promises)
.then((values) => {
// do something with all six
})
.catch((err) => {
// handle an error in
// any of the promises
});
Creating Promises
Promise.resolve(17);
Promise.reject(Error("NOPE"));
new Promise((resolve, reject) => {
});
Creating Promises
db.query = function(sql, callback) {
// 3rd party code that we don't control
}
db.promiseQuery = function(sql) {
return new Promise((resolve), reject) => {
db.query(sql, function(err, results) {
if(err) {
reject(err);
}
else {
resolve(results);
}
});
});
}
Promise.all([
db.promiseQuery("SELECT * FROM students"),
db.promiseQuery("SELECT * from teachers")
]).then((results) => {
var students = results[0];
var teacher = results[1];
//do stuff with students and teachers
}).catch((err) => {
logger.error(err);
});
Promise.all(promises)
Promise.race(promises)
Promise.resolve(resolvedValue);
Promise.reject(rejectedValue);
new Promise((resolve, reject) => {
})
.then(onResolve, [onReject])
.catch(onReject)
Promises API
Where are Promises used in LT?
- Everywhere! ;)
- All Redis queries
- All HTTP Requests
- Run to completion, or
- time out after 30 seconds
LT Load Test
var timeoutPromise = function(delay) {
return new Promise((resolve, reject) => {
setTimeout(reject, delay);
});
}
Promise.race([
loadTestCompletionPromise,
timeoutPromise(30 * 1000)
]).then(() => {
// load test succeeded! :)
}).catch(() => {
// load test timed out! :(
});
LT Load Test
var ids = [1, 2, 3, ..., 100000];
var chunks = _.chunk(ids, 5000);
sessionStore.findAll(chunks[0])
.then((sessions) => {
//do stuff
})
.then(() => {
return sessionStore.findAll(chunks[1]);
})
.then((sessions) => {
//do more stuff
})
.then(() => {
return sessionStore.findAll(chunks[2]);
})
//etc.
Chunking
var ids = [1, 2, 3, ..., 100000];
var chunks = _.chunk(ids, 5000);
var promiseGenerators = chunks.map((chunk) => {
function() {
return sessionStore.findAll(chunk);
}
});
promiseGenerators.reduce((memo, f) => {
memo.then(f);
}, Promise.resolve([]));
Chunking
Quiz Time!
function doStuff() {
return Promise.reject(17);
}
doStuff()
.then(() => {
console.log('first');
})
.then(() => {
console.log('second')
})
.catch((err) => {
console.log('REJECTED!')
});
function doStuff() {
return Promise.reject(17);
}
doStuff()
.catch((err) => {
console.log('REJECTED!')
})
.then(() => {
console.log("AFTER REJECTION!");
})
.catch(() => {
console.log("I'M STILL REJECTED!");
});
function doStuff() {
return Promise.resolve(17);
}
function sayHello(name) {
return Promise.resolve("Hi, " + name);
}
doStuff()
.then((value) => {
console.log("Value is: " + value);
return Promise.all([
sayHello("Joel"),
sayHello("Manda")
]);
})
.then((greetings) => {
greetings.forEach(g => console.log(g));
});
function doStuff() {
return Promise.resolve(17);
}
var p = doStuff();
p.then(() => Promise.reject(Error("NOPE")))
p.then((value) => {
console.log("SUCCESS!");
})
.catch((err) => {
console.log("ERROR!");
});
Promise.resolve(this.talk);
RX JS Promises Observables 4.x
By tkssharma
RX JS Promises Observables 4.x
- 1,085