Introduction
Promises revolutionized JavaScript’s asynchronous programming by providing a structured way to handle tasks like data fetching and processing. However, many developers find it challenging to extract the plain values of promises for use outside their chains. Whether you’re building a real-time dashboard or integrating third-party APIs, knowing how to handle promises effectively is crucial. This guide explores five distinct methods for extracting plain values from promises, each illustrated with professional, real-world scenarios that bring these techniques to life.
1. Using async and await: Simplifying Asynchronous Logic
Jane is a software engineer working on an enterprise HR application. One of her responsibilities is integrating an employee recognition API to show real-time achievements in the dashboard. Initially, her team relied on convoluted promise chains, which made the codebase difficult to maintain. Debugging errors felt like chasing shadows.
After introducing async and await into their workflow, everything changed. These modern constructs allowed her to write asynchronous code as though it were synchronous, improving both readability and maintainability.
interface Employee {
id: number;
name: string;
recognitionPoints: number;
}
async function fetchEmployeeData(): Promise<Employee | undefined> {
try {
const employee: Employee = await fetchEmployeeFromAPI();
console.log("Fetched employee data:", employee);
return employee; // Plain value returned
} catch (error) {
console.error("Error fetching employee data", error);
return undefined;
}
}
async function showEmployeeRecognition(): Promise<void> {
const employee = await fetchEmployeeData();
if (employee) {
console.log(
`${employee.name} has ${employee.recognitionPoints} recognition points.`
);
} else {
console.log("Failed to fetch employee data.");
}
}
showEmployeeRecognition();By implementing async/await, Jane’s team reduced technical debt and made the onboarding process for new developers seamless. This approach also improved the team’s ability to deliver feature enhancements on time, impressing the stakeholders.
2. Callback Functions: A Traditional Approach
Michael, a legacy systems consultant, was tasked with modernizing a logistics company’s tracking system. However, the existing infrastructure was based on Node.js versions that predated async/await. To avoid introducing breaking changes, he leveraged callbacks, which worked well within the constraints.
interface Package {
id: string;
status: string;
destination: string;
}
type Callback<T> = (error: Error | null, result?: T) => void;
function fetchPackageData(callback: Callback<Package>): void {
fetchPackageFromAPI()
.then((pkg: Package) => callback(null, pkg))
.catch((error: Error) => callback(error));
}
function processPackageData(): void {
fetchPackageData((error, pkg) => {
if (error) {
console.error("Error fetching package data:", error);
return;
}
console.log(`Package ${pkg?.id} is headed to ${pkg?.destination}.`);
});
}
processPackageData();While callbacks might seem dated, Michael demonstrated how they could still be relevant in environments with stringent compatibility requirements. His careful handling of asynchronous operations kept the logistics system reliable during its transition phase.
3. Promise Chaining: Keeping It Functional
Emma, a backend developer at a fintech startup, was building a payment processing service. To fetch transaction details from an external API and process them sequentially, she relied on promise chaining. This approach complemented her preference for functional programming principles.
interface Transaction {
id: string;
amount: number;
status: string;
}
function fetchTransactionData(): Promise<Transaction | undefined> {
return fetchTransactionFromAPI()
.then((transaction: Transaction) => {
console.log("Transaction details:", transaction);
return transaction; // Plain value passed to the next `then`
})
.catch((error: Error) => {
console.error("Error fetching transaction data", error);
return undefined;
});
}
function logTransactionDetails(): void {
fetchTransactionData().then((transaction) => {
if (transaction) {
console.log(
`Processed transaction ${transaction.id} for ${transaction.amount} USD.`
);
}
});
}
logTransactionDetails();Emma’s use of promise chaining kept the code concise and ensured each step of the process was explicitly defined. Her clear and modular codebase became a benchmark for other teams in her company.
4. Using .then in Combination with Global State
Alex, a junior developer at a marketing agency, was tasked with building an event registration tracker for an upcoming conference. Facing tight deadlines, Alex opted to use global state to store fetched data temporarily.
interface Attendee {
id: string;
name: string;
registered: boolean;
}
let attendee: Attendee | undefined;
function fetchAndStoreAttendee(): void {
fetchAttendeeFromAPI()
.then((data: Attendee) => {
attendee = data;
console.log(`Attendee ${attendee.name} has registered.`);
})
.catch((error: Error) => {
console.error("Error fetching attendee data:", error);
});
}
function logAttendeeStatus(): void {
if (attendee) {
console.log(`Current attendee: ${attendee.name}`);
} else {
console.log("No attendee data available.");
}
}
fetchAndStoreAttendee();
setTimeout(logAttendeeStatus, 2000); // Check after 2 secondsWhile using global state is generally discouraged due to potential side effects, this approach enabled Alex to deliver a functional prototype quickly. However, his mentor encouraged him to transition to a state management library for long-term scalability.
5. Wrapping Promises in Synchronous-like Helpers
Priya, a DevOps engineer, was working on a deployment monitoring tool that needed to retrieve server health data synchronously in certain contexts. To achieve this, she created a synchronous-like wrapper for promises.
interface ServerHealth {
serverId: string;
status: string;
uptime: number;
}
function getPromiseValue<T>(promise: Promise<T>): T {
let result: T | undefined;
promise.then((value) => (result = value));
while (result === undefined) {
// Busy-wait loop (use cautiously!)
}
return result as T;
}
function logServerHealth(): void {
const serverHealth: ServerHealth = getPromiseValue(
fetchServerHealthFromAPI()
);
console.log(
`Server ${serverHealth.serverId} is ${serverHealth.status} with uptime ${serverHealth.uptime} hours.`
);
}
logServerHealth();⚠️ Note: This method, while effective for Priya’s use case, is not recommended for most scenarios as it can block the event loop and degrade application performance.
Conclusion
Mastering promises is an essential skill for any JavaScript or TypeScript developer. This guide showcased five practical techniques for extracting plain values from promises, each tailored to specific use cases and constraints. While async/await is the most modern and preferred method, understanding older techniques like callbacks and promise chaining ensures versatility. Always aim for clean, maintainable, and performant code by adhering to best practices.
Additional Resources
By leveraging these methods and resources, you’ll be well-equipped to handle promises effectively in your projects.
