How to Manage Asynchronous Operations in ArkTS Using Promises and Async/Await

Read the original article：How to Manage Asynchronous Operations in ArkTS Using Promises and Async/Await
In modern application development, especially on platforms like HarmonyOS, handling asynchronous operations efficiently is crucial for ensuring smooth performance. Asynchronous programming prevents tasks like network requests or file I/O operations from blocking the main thread of an application, ensuring that the app remains responsive.

In this article, we’ll dive deep into Asynchronous Programming using Promises and async/await in ArkTS. This guide will help you understand how these tools work and how to implement them in your HarmonyOS applications.

Introduction

When building applications for HarmonyOS, performance is always a top priority, especially for devices with limited resources, like smartwatches. Asynchronous programming ensures that your applications can handle time-consuming operations, like fetching data from the network, without freezing the user interface or blocking other tasks.

In ArkTS, asynchronous programming is primarily achieved using Promises and async/await. While Promises provide a flexible and powerful approach to asynchronous programming, async/await simplifies the syntax, making it easier to manage asynchronous code.

What Is Asynchronous Programming?

Asynchronous programming allows for non-blocking execution of time-consuming operations. Instead of waiting for a task to finish before moving on to the next one, asynchronous operations allow other tasks to continue running.

For example, when fetching data from a remote server or reading a file, you don’t want your app to be frozen while waiting for the data to return. Asynchronous programming enables this by allowing the operation to run in the background, while the app continues to perform other tasks.

Using Promises in ArkTS

In ArkTS, Promises represent the result of an asynchronous operation that will eventually be completed (resolved) or rejected. They allow you to define actions to take once the operation is complete. Let’s take a look at how we can use Promises to handle asynchronous operations.

Example: Basic Promise Implementation

function fetchData(url: string): Promise {
return new Promise((resolve, reject) => {
const success = true; // Simulate success or failure
setTimeout(() => {
if (success) {
resolve('Data fetched successfully');
} else {
reject('Failed to fetch data');
}
}, 1000); // Simulate network delay
});
}
fetchData('https://example.com')
.then((data) => {
console.log(data); // Output: 'Data fetched
successfully'
})
.catch((error) => {
console.error(error);// Output: 'Failed to fetch data'
});

Explanation:

• fetchData is a function that returns a Promise. It resolves after one second to simulate a network request.
• The .then() method is used to handle the success case, and .catch() handles any errors.

Simplifying Asynchronous Code with Async/Await

While Promises are powerful, they can sometimes lead to complex and nested code, especially when dealing with multiple asynchronous operations. Async/await is a more readable and simpler way to handle Promises. It allows you to write asynchronous code that looks and behaves like synchronous code.

What Is Async/Await?

• async: The keyword that makes a function return a Promise. It allows you to write asynchronous code in a synchronous-like manner.
• await: Used inside an async function to pause the execution of the function until the Promise resolves or rejects.

Example: Async/Await Implementation

async function fetchData(url: string): Promise {
const success = true; // Simulate success or failure
const data = new Promise((resolve, reject) => {
setTimeout(() => {
if (success) {
resolve('Data fetched successfully');
} else {
reject('Failed to fetch data');
}
}, 1000); // Simulate network delay
});
return await data;
}
async function main() {
try {
const result = await fetchData('https://example.com');
console.log(result); // Output: 'Data fetched
successfully'
} catch (error) {
console.error(error); // Output: 'Failed to fetch data' }
}
main();

Explanation:

• fetchData is marked as async, which means it returns a Promise.
• We use await to pause the function until the Promise resolves, making the asynchronous code look synchronous.
• Errors are caught using a try/catch block.

Why Async/Await Is Better

1. Cleaner Code: Async/await simplifies asynchronous code by avoiding nested callbacks, making it easier to read and maintain.
2. Error Handling: It provides better error handling with try/catch, compared to nested .then() and .catch() methods.
3. Control Flow: Async/await makes handling sequential and parallel asynchronous tasks straightforward.

Handling Multiple Asynchronous Tasks

One of the most powerful features of async/await is the ability to handle multiple asynchronous tasks. You can wait for multiple operations to finish using Promise.all().

Example: Multiple Async Operations

async function fetchData(url: string): Promise {
return new Promise((resolve) => {
setTimeout(() => resolve(`Data from ${url}`), 1000); });
}
async function main() {
try {
const [result1, result2] = await Promise.all([
fetchData('https://example1.com'),
fetchData('https://example2.com')
]);
console.log(result1); // 'Data from
https://example1.com'
console.log(result2); // 'Data from
https://example2.com'
} catch (error) {
console.error(error);
}
}
main();

In this example:

• Promise.all() is used to run both asynchronous operations in parallel.
• The await keyword pauses the execution until both Promises are resolved, returning their results in an array.

Error Handling with Async/Await

One of the biggest challenges in asynchronous programming is managing errors. With Promises, you can handle errors with .catch(). But in async/await, errors are handled using try/catch.

Example: Async/Await with Error Handling

async function fetchData(url: string): Promise {
const success = false; // Simulating failure
return new Promise((resolve, reject) => {
setTimeout(() => {
if (success) {
resolve('Data fetched successfully');
} else {
reject('Failed to fetch data');
}
}, 1000);
});
}
async function main() {
try {
const result = await fetchData('https://example.com');
console.log(result);
} catch (error) {
console.error('Error:', error); // Output: 'Error:
Failed to fetch data'
}
}
main();

Here:

• try/catch is used to catch errors from the asynchronous operations, ensuring they don’t crash the application.

Testing Asynchronous Code

Testing asynchronous code can be tricky, but it’s essential to ensure everything works as expected. Here’s how you can test Promises and async functions in ArkTS.

Test Example for Promises

const result = await fetchData('https://example.com');
console.assert(result === 'Data fetched successfully','Test Passed!');

Test Example for Async/Await

try {
await fetchData('https://example.com');
} catch (error) {
console.assert(error === 'Failed to fetch data', 'Test Passed!');
}

Conclusion

Mastering asynchronous programming is essential for building smooth, responsive applications in ArkTS. By using Promises and async/await, developers can handle asynchronous tasks in a way that’s both efficient and easy to manage.

Whether you’re fetching data from an API or performing other time-consuming operations, these tools will allow you to keep your HarmonyOS applications performing at their best.

Ready to dive into asynchronous programming with ArkTS? Start using Promises and async/await today to build faster, more responsive applications for HarmonyOS devices!

References

Asynchronous Concurrency (Promise and Async/Await)

Written by Zulfu Balkan