In this article I will show you how to implement a promise in TypeScript. My implementation uses the monad interface I showed in the last article. I will implement the most common method of the promise class, the then pattern.
What is a Promise?
The promise method in TypeScript allows you to work with asynchronous code. When creating a promise, you have a success callback and an error callback. For example, when you have a method that reads a CSV, then you can call the success callback when the CSV is read and pass its data to the next step. If an error occurred, then you can call the error callback. The following then steps will be skipped and the first next catch statement will run to deal with the error.
For example, this code reads a CSV using promises
|
1 2 3 4 5 6 7 8 9 10 |
function readCSV(fileName: string): Promise<any[]> { return new Promise((resolve, reject) => { try { const data = readCsvFromFile(fileName); // CSV library. resolve(data); } catch (e) { reject(e); } }); } |
Now you can use this function to read a csv. If there is an error, you can deal with that as well.
|
1 2 3 4 5 6 7 |
readCSV(“test.csv”) .then(data => { // do something }) .catch(error => { // handle error }); |
The nice thing about this, is that the above code is itself a promise. This means that you can re-use it elsewhere in your code base using the same then pattern.
Advantage of using Promises
The then pattern with Promises is useful in TypeScript. This pattern is common with functional programming. Without this pattern, your code would be hard to maintain, because callbacks will be passed around everywhere; and because of these callbacks the code is harder to test.
Let me show you an example of the so called “callback hell”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Functions with callbacks function retrieveFileNameFromServer(url: string, onSuccess: (fileName: string) => void, onError: (error: string) => void): void; function readCsv(fileName: string, onSuccess: (data: any[]) => void, onError: (error: string) => void): void; function sendData(data: any[], onSuccess: () => void, onError: (error: string) => void): void; // Usage retrieveFileNameFromServer(“/api/getName”, fileName => { readCsv(fileName, data => { sendData(data, () => { // Send data success }, error => { // Deal with error in sendData }) }, error => { // Deal with error in readCsv }) }, error => { // Deal with error in retrieveFileNameFromServer }) |
In this code, you can see that this pattern becomes cumbersome quickly. There are 3 places to deal with errors, and the indentation makes the code difficult to read.
With promises, you can use the then method. Let’s see in the next section how to implement and use it to improve the code example above.
Promise Implementation
This is my implementation for the promise monad. This class follows the pattern I showed in the previous article about monads.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
type MyCallback<T, E = undefined> = (onSuccess: (value: T) => void, onError: (error: E) => void) => void; export class MyPromise<T, E = undefined> { readonly execute: MyCallback<T, E>; constructor(x: MyCallback<T, E>) { this.execute = x; } map<P>(f: (x: T) => P): MyPromise<P, E> { return new MyPromise((onSuccess, onError) => { this.execute(o => onSuccess(f(o)), onError); }); } flatMap<P, Q>(f: (value: T) => MyPromise<P, Q>): MyPromise<P, Q | E> { return new MyPromise<P, Q | E>((onSuccess, onError) => { this.execute(v1 => f(v1).execute(onSuccess, onError), onError); }); } } |
Now we can use this promise class implementation to rewrite the callbacks into a pipeline with flatMaps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
type ErrorException<E> = {type: E; message: string}; // Callback functions now return a promise function retrieveFileNameFromServer(url: string): MyPromise<string, ErrorException<‘server’>>; function readCsv(fileName: string): MyPromise<any[], ErrorException<‘csv’>>; function sendData(data: any[]): MyPromise<void, ErrorException<‘send’>>; // Usage const myProgram = retrieveFileNameFromServer(“/api/getName”) .flatMap(fileName => readCsv(fileName)) .flatMap(data => sendData(data)); // Run program myProgram.execute(() => { // Success 🙂 }, error => { // Deal with errors switch (error.type) { case “server”: case “csv”: case “send”: console.log(error.message); } }); |
The error handling of this method is just a single function. You can choose to deal with all errors, or you can deal with just some of them. The types of the error stack nicely, meaning that the compiler will tell you what errors you still need to deal with. In my case, the linting shows that these errors are to be dealt with.
Also, the callback functions in the example above now return instances of the same promise class. This means you can now create utils classes for easier testing.
Conclusion
In this article I showed a basic functional programming implementation of a promise. With this implementation, I showcased how you can use the map and flatMap methods to mimic the then behaviour in the Promise class.