es6 – Stepan Suvorov Blog https://stepansuvorov.com/blog Release 2.0 Wed, 14 Sep 2016 14:12:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 Angular + ES6 Promise https://stepansuvorov.com/blog/2016/09/angular-es6-promise/ https://stepansuvorov.com/blog/2016/09/angular-es6-promise/#comments Mon, 12 Sep 2016 17:43:29 +0000 http://stepansuvorov.com/blog/?p=3125 Continue reading ]]> It would be really nice if we could use native ECMAScript 2015 Promises with Angular instead of $q service that is provided from box to be close to pure JavaScript:

[javascript]
//somewhere inside component controller
let promise = new Promise((resolve) => setTimeout(() => resolve(‘resolved’), 2000));
promise.then(x => this.x = x);
[/javascript]

But in this case we will have to run digest manually for each resolve(to synchronise view and model):

[javascript]
let promise = new Promise((resolve) => setTimeout(() => resolve(‘resolved’), 2000));
promise.then(x => {
$scope.apply();
this.x = x;
});
[/javascript]

But what if we hack the Promise and intercept our digest call there:

[javascript]
class SubPromise extends Promise {
constructor(executor) {
super(function(_resolve, _reject) {
var resolve = (data) => {
var res = _resolve(data);
angular.element(document.body).injector().get(‘$rootScope’).$apply();
return res;
}
return executor(resolve, _reject);
});
}
}
[/javascript]

now we just need to overwrite standard Promise:

[javascript]
window.Promise = SubPromise;
[/javascript]

to keep it simple to cover for unit-tests you can also wrap it into an angular factory:

[javascript]
factory(‘Promise’, () => Promise);
[/javascript]

Here you can play with the code.

Discussion on stackoverflow about customising ES6 Promise.

!Attention: This experiment was made just for learning purposes and it should not be applied for the real projects.

]]>
https://stepansuvorov.com/blog/2016/09/angular-es6-promise/feed/ 2
setTimeout + ES6 Promise https://stepansuvorov.com/blog/2016/09/settimeout-es6-promise/ https://stepansuvorov.com/blog/2016/09/settimeout-es6-promise/#comments Sat, 10 Sep 2016 09:35:27 +0000 http://stepansuvorov.com/blog/?p=3120 Continue reading ]]> I’m just thinking how convenient could it be if we have setTimeout returning promise.

[javascript]
setTimeout(1000).then(/* … do whatever */);
[/javascript]

Let’s create our own one and call it ‘delay’ (using ES6 Promise):

[javascript]
delay = ms => new Promise(resolve => setTimeout(resolve, ms));
[/javascript]

so now we already can use our delay function:

[javascript]
delay(1000).then(/* … do whatever */);
[/javascript]

but let’s not forget about promise cancelation, in this case we need to store reject and timeout id:

[javascript]
delay = ms => {
var promiseCancel, promise = new Promise((resolve, reject) => {
let timeoutId = setTimeout(resolve, ms);
promiseCancel = () => {
clearTimeout(timeoutId);
reject(Error("Cancelled"));
}
});
promise.cancel = () => {
promiseCancel();
};
return promise;
}
[/javascript]

Plunker to play with this code.

Stackoverflow discussion.

]]>
https://stepansuvorov.com/blog/2016/09/settimeout-es6-promise/feed/ 4
ES6 examples https://stepansuvorov.com/blog/2014/02/es6-examples/ https://stepansuvorov.com/blog/2014/02/es6-examples/#respond Fri, 21 Feb 2014 21:57:19 +0000 http://stepansuvorov.com/blog/?p=1483 You can try ES6 Examples on es6fiddle.net.

]]>
https://stepansuvorov.com/blog/2014/02/es6-examples/feed/ 0