Closures
Promises
{
fetch()
.then(result => console.log(result))
.catch(error => console.error(error))
}
{
new Promise((resolve, reject) => resolve("Hey there!"))
}
{
const wait = timeout => new Promise(resolve => {
setTimeout(resolve, timeout)
})
wait(300).then(() => console.log("I'm back!"))
}
{
const flipACoin = new Promise((resolve, reject) => {
const heads = Math.random() >= 0.5
heads ? resolve("You won!") : reject("You lost!")
})
flipACoin
.then(console.log)
.catch(console.error)
}
{
new Promise((resolve, reject) => {
resolve("result 1 ")
}).then(result => {
console.log(result) // result 1
return "result 2"
}).then(result => {
console.log(result) // result 2
return "result 3"
}).then(result => {
console.log(result) // result 3
})
}
{
fetch("https://my-wonderful-api.com/some-data.json")
.then(response => response.json())
.then(data => console.log(data))
}
md`Async/Await is a special syntax in order to work with promises in a similar way as with synchronous functions. Functions can be declared as asynchronous with the keyword \`sync\`.`
{
async function myFunction() {
return "my-value"
}
}
md`An asynchronous function always returns a promise. Other values are always wrapped in a resolved promise before the function returns. That means that the following two functions are equivalent:`
{
async function f1() {
return 1
}
async function f2() {
return Promise.resolve(1)
}
}
md`With the keyword **await** we can await the return value of an asynchronous function or a promise. JavaScript will pause and wait until the promise is settled, return the value and proceed with the following code.`
{
async function f() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("foo!"), 1000)
})
const result = await promise
console.log(result) // "foo!"
}
}
{
(async () => {
const response = await fetch("https://my-wonderful-api.com/some-data.json")
const data = await response.json()
console.log(data)
})()
}
md`There are a few functions that help to iterate through promises. Each of these functions takes an iterable of promises and returns a single promise.`
{
const promise1 = new Promise((resolve) => {
setTimeout(resolve, 100, 'promise 1')
})
const promise2 = new Promise((resolve) => {
setTimeout(resolve, 200, 'promise 2')
})
const promise3 = Promise.reject(-1)
Promise.any([promise1, promise2, promise3]).then(value => {
console.log(value) // promise 1
})
}
md`If all promises in the given iterable are rejected, then \`Promise.any()\` will return with an \`AggregateError\` that groups together all error messages.`
{
const promise1 = Promise.reject(-1)
const promise2 = Promise.reject(-1)
Promise.any([promise1, promise2]).catch((value) => {
console.log(value) // AggregateError: All promises were rejected
})
}
{
const promise1 = Promise.resolve(1)
const promise2 = Promise.resolve(2)
const promise3 = Promise.reject("an error")
Promise.all([promise1, promise2]).then(values => {
console.log(values) // Array [1, 2]
})
Promise.all([promise1, promise2, promise3]).catch(value => {
console.log(value) // "an error"
})
}
{
const promise1 = Promise.resolve(3)
const promise2 = new Promise((resolve, reject) => {
setTimeout(reject, 100, 'an error')
})
Promise.allSettled([promise1, promise2]).
then((results) => {
console.log(results)
// Array [
// Object { status: "fulfilled", value: 3 },
// Object { status: "rejected", reason: "an error" }
// ]
})
}
md`### Promise.race()`
md`Returns a promise that resolves or rejects as soon as the first promise in the iterable resolves or rejects.`
{
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 1)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, 2)
})
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
})
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
