How to do Promises?

by Admiral Potato

HTML

<div id="app">
	<div>
		<button @click="makePromise">Make Promise</button>
		<button @click="resolvePromise">Resolve Promise</button>
		<button @click="rejectPromise">Reject Promise</button>
	</div>
	<div>
		<pre>
Promise status:
{{promise !== undefined ? promise.status : 'No promise'}}
		</pre>
	</div>
	<div>
		<pre v-for="item in output">{{item}}</pre>
	</div>
</div>

JavaScript

let app = new Vue({
	el: '#app',
	data: {
		output: [],
		promise: undefined
	},
	methods: {
		makePromise: function(){
			let promise = makeBetterPromise();
			setTimeout(
				function(){
					promise.rejectMe('The user is too slow and the promise timed out.');
				},
				5000
			);
			promise
				.then(function(result){
					app.output.push(`Success after ${promise.totalTime}ms: User manually resolved the promise. Result value was: ${result}`);
				})
				.catch(function(error){
					app.output.push(`Error aftert ${promise.totalTime}ms: ${error}`);
				});
			this.promise = promise;
		},
		resolvePromise: function(){
			this.promise.resolveMe(Math.random());
		},
		rejectPromise: function(){
			this.promise.rejectMe(`User manually terminated the promise.`);
		}
	}
});

let makeBetterPromise = function(){
	let resolveFunc;
	let rejectFunc;
	let promise = new Promise(function(resolve, reject){
		let settle = function(){
			promise.settleTime = Date.now();
			promise.totalTime = promise.settleTime - promise.startTime;
		}
		resolveFunc = function(value){
			promise.status = 'fulfilled';
			settle();
			resolve(value);
		};
		rejectFunc = function(value){
			promise.status = 'rejected';
			settle();
			reject(value);
		};
	});
	promise.startTime = Date.now();
	promise.settleTime = null;
	promise.totalTime = null;
	promise.status = 'pending';
	promise.resolveMe = resolveFunc;
	promise.rejectMe = rejectFunc;
	return promise;
};