Can AngularJs $q promises work alongside async/await syntax?

Question

Can AngularJs $q promises work alongside async/await syntax?

I am currently working on a unique Angular and AngularJs hybrid application with TypeScript versions 9.07, 1.5.11, and 3.7.5. Our HTTP requests are all handled by a wrapper service written in plain Javascript, which was originally designed for the "legacy" AngularJs part of the application. This service generates $q promises using the AngularJs $http service, even for requests made from new Angular components. Since the service is plain JavaScript, there are no typing issues with return values as TypeScript treats them as any, allowing me to cast them as IPromise<TReturnType>.

My main query revolves around whether these promises are fully compatible with TypeScript's async and await keywords. I have tested it with simple examples and it seems to work fine, but I am wary of potential runtime issues that may arise when using those keywords with non-native Promises.

javascript angularjs angular typescript

Answer 1

Answer №1

Using the async keyword is perfectly compatible, as it generates a new EcmaScript Promise object without relying on an existing promise instance.

If an async function returns a thenable, the resulting native promise will resolve based on that thenable.

This behavior is demonstrated in the following code snippet:

async function test() {
    let thenable = { then: cb => cb(13) };
    return thenable;
}

let result = test();
console.log(result instanceof Promise);
result.then(console.log); // 13

The await keyword can also be used with a thenable-returning expression, eliminating the need for an EcmaScript-compliant promise:

async function test() {
    let thenable = { then: cb => cb(13) };
    let value = await thenable;
    console.log(value); // 13
}

test();

In summary, both async and await keywords handle thenables appropriately without mandating them to be instances of native Promises.

Additionally, $q promises are indeed thenables, further supporting this behavior.

Answer 2

Using the async keyword is perfectly compatible, as it generates a new EcmaScript Promise object without relying on an existing promise instance.

If an async function returns a thenable, the resulting native promise will resolve based on that thenable.

This behavior is demonstrated in the following code snippet:

async function test() {
    let thenable = { then: cb => cb(13) };
    return thenable;
}

let result = test();
console.log(result instanceof Promise);
result.then(console.log); // 13

The await keyword can also be used with a thenable-returning expression, eliminating the need for an EcmaScript-compliant promise:

async function test() {
    let thenable = { then: cb => cb(13) };
    let value = await thenable;
    console.log(value); // 13
}

test();

In summary, both async and await keywords handle thenables appropriately without mandating them to be instances of native Promises.

Additionally, $q promises are indeed thenables, further supporting this behavior.

Can AngularJs $q promises work alongside async/await syntax?

Answer №1

Similar questions

Combining duplicate key-value pairs in a JSON object into an array using JavaScript

Change a particular value in redux-form using a custom function callback within react-admin

Is there a way to prevent users from right clicking on all links with the same class using js/jquery?

Redirecting Firebase user authentication to a different webpage

Executing a JQuery AJAX request to eliminate a script tag

Exploring Ways to Invoke Controller Functions in AngularJS

Disable JavaScript import optimization for a specific file in IntelliJIDEA

Trouble transferring $rootScope.currentUser between AngularJS profile and settings page

"Implementing a custom dropdown feature using ui-select2 within a directive that is

accomplishing validation in Angular forms while avoiding the use of the HTML form tag

Ajax modal login feature refuses to close

What is the process to designate a specific value to a key in an array?

Restrict the display of items in a unordered list element

Sidenav Angular Material cdkScrollable is an effective tool for creating scrollable

Can you explain how NGXS store manages its data storage? Is there a memory limit set for the NGXS store? And where exactly is the NGXS store memory located within the browser

Issues with excessive firing of JQuery blur and hide functions

"Upon compilation, the Angular app displays a blank screen instead of the expected

Restrict the number of rows displayed in the ui-grid to the maximum

Unfortunately, the rootScope cannot be accessed within the window.onnotification function

Encountering the NullInjectorError when Angular 17 is unable to find a provider for the function(options)