Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript async/await and angular $q service

New TypeScript async/await feature uses ES6 promises. AngularJS uses $q service promises with slightly different interface.

Is there any way to use TypeScript async/await feature with $q service promises?

like image 237
Random Avatar asked Feb 25 '16 13:02

Random


People also ask

Can we use async await in Angular?

Using Async/Await in Angular Basically, Async/Await works on top of Promise and allows you to write async code in a synchronous manner. It simplifies the code and makes the flow and logic more understandable.

What is difference between async and await in Angular?

It makes asynchronous code look more like synchronous/procedural code, which is easier to understand. await can only be used in async functions. It is used for calling an async function and waits for it to resolve or reject. await blocks the execution of the code within the async function in which it is located.

How do I use async await in Angular 10?

According to MDN: When an async function is called, it returns a Promise. When the async function returns a value, the Promise will be resolved with the returned value. When the async function throws an exception or some value, the Promise will be rejected with the thrown value.

Why we use async and await in typescript?

Asynchronous functions are prefixed with the async keyword; await suspends the execution until an asynchronous function return promise is fulfilled and unwraps the value from the Promise returned.


3 Answers

You can make it work like this:

angular.module('your app')
        .run(['$window', '$q', function($window, $q) {
            $window.Promise = $q;
        }]);
like image 127
Eran Shabi Avatar answered Oct 08 '22 15:10

Eran Shabi


I do not think you will be able to use them directly. But it should be quite easy to convert q promise into a++ promise, something like this:

function Convert<T>(qPromise): Promise<T> 
{
    return new Promise<T>((resolve, reject) =>
    {
        qPromise.then((result: T) => resolve(result), (e) => reject(e));
    });
};
like image 40
Amid Avatar answered Oct 08 '22 16:10

Amid


Finally I used the following workaround:

declare var __awaiter: Function;
(window as any).__awaiter = __awaiter; // set global __awaiter to avoid declaring default __awaiter in other files
async () => { } // dummy async function to generate __awaiter code for current file

angular.module('ts-awaiter', []).run(['$timeout', ($timeout: ng.ITimeoutService) => {
    function wrap(func: Function) {
        return function () {
            func.apply(this, arguments);
            $timeout(() => { }); // run angular digest
        };
    }

    var oldAwaiter = __awaiter;
    (window as any).__awaiter = (thisArg: any, _arguments: any, P: Function, generator: any) => {
        P = function (executor: Function) {
            return new Promise<any>((resolve, reject) => {
                resolve = wrap(resolve);
                reject = wrap(reject);
                executor(resolve, reject);
            });
        };
        return oldAwaiter(thisArg, _arguments, P, generator);
    };
}]);

Comliper for Typescript 1.8 generates __awaiter function in every file where await operator is used. I replace it with implementation which passes custom Promise constructor which initiates digest cycle after every resolve and reject call. Here is usage example: https://github.com/llRandom/ts-awaiter

like image 29
Random Avatar answered Oct 08 '22 17:10

Random