Nutella Pancake Machine


    1.3.1 • Public • Published


    A tiny wrapper for Promise to carry a promise and (if known) a value, plus a resolved flag.

    This makes it easy to bridge between async promise-based code, and single-thread code.

    Use-cases: e.g. within a React render() function.

    Example code

    import PromiseValue from 'promise-value';
    // Make from a promise, e.g. an ajax call
    let pvAjax = new PromiseValue($.get(""));
    console.log(pvAjax.resolved, " = false");
    // You can add a then() handler
    pvAjax.promise.then(function(result) {
    	console.log("Web-page get promise resolved", result);
    // Error handling? just check pvAjax.error
    // Or you can make a PromiseValue directly from a value
    let pvInstant = new PromiseValue("hello");
    console.log(pvInstant.resolved, " = true");
    // once a promise resolves, you can get the value. Until then value is null.
    pvInstant.promise.then(function(result) {
    	console.log("Instant Promise resolved to: "+result);

    React Example: Using PromiseValue to manage web requests inside a render function

    import React, {useState} from 'react';
    import PromiseValue from 'promise-value';
    import $ from 'jquery';
    const MyAjaxWidget = () => {
    	// What is the state?
    	let [pvMyAjaxData, setpvMyAjaxData] = useState();
    	// Hack: a dummy state var to trigger a react update
    	let [dummy, setDummy] = useState();
    	if ( ! pvMyAjaxData) {
    		// Start the ajax call
    		const pAjax = $.get("");		
    		pvMyAjaxData = new PromiseValue(pAjax);
    		setpvMyAjaxData(pvMyAjaxData); // Update the state, so we won't keep calling the server
    		// trigger a react render when the response comes back (inc on error)
    		pAjax.then(() => setDummy(":)"), () => setDummy(":("));
    	// Has the web request come back?
    	if ( ! pvMyAjaxData.resolved) {
    		// -- return a spinner
    		return <div className='spinner'>Loading...</div>;
    	// Error handling
    	if (pvMyAjaxData.error) return <div>Web Request Failed :( {JSON.stringify(pvMyAjaxData.error)}</div>;
    	// yes! We have data
    	return <div>Lovely data! {JSON.stringify(pvMyAjaxData.value)}</div>;


    class PromiseValue {
    	/** @type {!Promise} */
    	/** @type {!boolean} */
    	/** @type {?Object} */
    	/** @type {?Error} */

    Call it like this: new PromiseValue(x) where x can be a Promise or a value.

    The promise part of a PromiseValue is always set. The behaviour depends on the input x:

    • If it's a value -> you'll have a resolved Promise
    • If it's a Promise (or thenable) -> the input Promise
    • null/undefined -> rejected Promise

    The value and error properties will be set instantly if known, and otherwise auto-set when the promise resolves. The resolved flag records the promise status, and changes to true once the promise is resolved.


    npm i promise-value

    DownloadsWeekly Downloads






    Unpacked Size

    25.6 kB

    Total Files


    Last publish


    • winterstein