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?
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.
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.
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.
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.
You can make it work like this:
angular.module('your app')
.run(['$window', '$q', function($window, $q) {
$window.Promise = $q;
}]);
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));
});
};
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With