Effect vs Promise
In this guide, we will explore the differences between Promise
and Effect
, two approaches to handling asynchronous operations in TypeScript. We'll discuss their type safety, creation, chaining, and concurrency, providing examples to help you understand their usage.
Type safety
Let's start by comparing the types of Promise
and Effect
. The type parameter A
represents the resolved value of the operation:
Promise<A>
Here's what sets Effect
apart:
- It allows you to track the types of errors statically through the type parameter
Error
. For more information about error management inEffect
, see Expected Errors. - It allows you to track the types of required dependencies statically through the type parameter
Context
. For more information about context management inEffect
, see Managing Services.
Creating
Success
Let's compare creating a successful operation using Promise
and Effect
:
// $ExpectType Promise<number>
export const success = Promise.resolve(2)
Failure
Now, let's see how to handle failures with Promise
and Effect
:
// $ExpectType Promise<never>
export const failure = Promise.reject("Uh oh!")
Constructor
Creating operations with custom logic:
// $ExpectType Promise<number>
export const task = new Promise<number>((resolve, reject) => {
setTimeout(() => {
Math.random() > 0.5 ? resolve(2) : reject("Uh oh!")
}, 300)
})
Thenable
Mapping the result of an operation:
map
// $ExpectType Promise<number>
export const mapped = Promise.resolve("Hello").then((s) => s.length)
flatMap
Chaining multiple operations:
// $ExpectType Promise<number>
export const flatMapped = Promise.resolve("Hello").then((s) =>
Promise.resolve(s.length)
)
Comparing Effect.gen with async/await
If you are familiar with async
/await
, you may notice that the flow of writing code is similar.
Let's compare the two approaches:
const increment = (x: number) => x + 1
const divide = (a: number, b: number): Promise<number> =>
b === 0
? Promise.reject(new Error("Cannot divide by zero"))
: Promise.resolve(a / b)
// $ExpectType Promise<number>
const task1 = Promise.resolve(10)
// $ExpectType Promise<number>
const task2 = Promise.resolve(2)
// $ExpectType () => Promise<string>
const program = async function () {
const a = await task1
const b = await task2
const n1 = await divide(a, b)
const n2 = increment(n1)
return `Result is: ${n2}`
}
program().then(console.log) // Output: "Result is: 6"
It's important to note that although the code appears similar, the two programs are not identical. The purpose of comparing them side by side is just to highlight the resemblance in how they are written.
Concurrency
Promise.all()
const task1 = new Promise<number>((resolve, reject) => {
console.log("Executing task1...")
setTimeout(() => {
console.log("task1 done")
resolve(1)
}, 100)
})
const task2 = new Promise<number>((resolve, reject) => {
console.log("Executing task2...")
setTimeout(() => {
console.log("task2 done")
reject("Uh oh!")
}, 200)
})
const task3 = new Promise<number>((resolve, reject) => {
console.log("Executing task3...")
setTimeout(() => {
console.log("task3 done")
resolve(3)
}, 300)
})
export const program = Promise.all([task1, task2, task3])
program.then(console.log, console.error)
/*
Output:
Executing task1...
Executing task2...
Executing task3...
task1 done
task2 done
Uh oh!
task3 done
*/
Promise.allSettled()
const task1 = new Promise<number>((resolve, reject) => {
console.log("Executing task1...")
setTimeout(() => {
console.log("task1 done")
resolve(1)
}, 100)
})
const task2 = new Promise<number>((resolve, reject) => {
console.log("Executing task2...")
setTimeout(() => {
console.log("task2 done")
reject("Uh oh!")
}, 200)
})
const task3 = new Promise<number>((resolve, reject) => {
console.log("Executing task3...")
setTimeout(() => {
console.log("task3 done")
resolve(3)
}, 300)
})
export const program = Promise.allSettled([task1, task2, task3])
program.then(console.log, console.error)
/*
Output:
Executing task1...
Executing task2...
Executing task3...
task1 done
task2 done
task3 done
[
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: 'Uh oh!' },
{ status: 'fulfilled', value: 3 }
]
*/
Promise.any()
const task1 = new Promise<number>((resolve, reject) => {
console.log("Executing task1...")
setTimeout(() => {
console.log("task1 done")
reject("Something went wrong!")
}, 100)
})
const task2 = new Promise<number>((resolve, reject) => {
console.log("Executing task2...")
setTimeout(() => {
console.log("task2 done")
resolve(2)
}, 200)
})
const task3 = new Promise<number>((resolve, reject) => {
console.log("Executing task3...")
setTimeout(() => {
console.log("task3 done")
reject("Uh oh!")
}, 300)
})
export const program = Promise.any([task1, task2, task3])
program.then(console.log, console.error)
/*
Output:
Executing task1...
Executing task2...
Executing task3...
task1 done
task2 done
2
task3 done
*/
Promise.race()
const task1 = new Promise<number>((resolve, reject) => {
console.log("Executing task1...")
setTimeout(() => {
console.log("task1 done")
reject("Something went wrong!")
}, 100)
})
const task2 = new Promise<number>((resolve, reject) => {
console.log("Executing task2...")
setTimeout(() => {
console.log("task2 done")
reject("Uh oh!")
}, 200)
})
const task3 = new Promise<number>((resolve, reject) => {
console.log("Executing task3...")
setTimeout(() => {
console.log("task3 done")
resolve(3)
}, 300)
})
export const program = Promise.race([task1, task2, task3])
program.then(console.log, console.error)
/*
Output:
Executing task1...
Executing task2...
Executing task3...
task1 done
Something went wrong!
task2 done
task3 done
*/
FAQ
Question. What is the equivalent of starting a promise without immediately waiting for it in Effects?
const task = (delay: number, name: string) =>
new Promise((resolve) =>
setTimeout(() => {
console.log(`${name} done`)
return resolve(name)
}, delay)
)
export async function program() {
const r0 = task(2_000, "long running task")
const r1 = await task(200, "task 2")
const r2 = await task(100, "task 3")
return {
r1,
r2,
r0: await r0
}
}
program().then(console.log)
/*
Output:
task 2 done
task 3 done
long running task done
{ r1: 'task 2', r2: 'task 3', r0: 'long running promise' }
*/
Answer: You can achieve this by utilizing Effect.fork
and Fiber.join
.
import { Effect, Fiber } from "effect"
const task = (delay: number, name: string) =>
Effect.gen(function* (_) {
yield* _(Effect.sleep(delay))
console.log(`${name} done`)
return name
})
const program = Effect.gen(function* (_) {
const r0 = yield* _(Effect.fork(task(2_000, "long running task")))
const r1 = yield* _(task(200, "task 2"))
const r2 = yield* _(task(100, "task 3"))
return {
r1,
r2,
r0: yield* _(Fiber.join(r0))
}
})
Effect.runPromise(program).then(console.log)
/*
Output:
task 2 done
task 3 done
long running task done
{ r1: 'task 2', r2: 'task 3', r0: 'long running promise' }
*/