For example, look at this code:

function myPromise() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('Stack Overflow');
        }, 2000);
    });
}
async function sayHello() {
     const externalFetchedText = await myPromise();
     console.log('Hello ' + externalFetchedText);
}

sayHello();

For example, look at this code:

function myPromise() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('Stack Overflow');
        }, 2000);
    });
}
async function sayHello() {
     const externalFetchedText = await myPromise();
     console.log('Hello ' + externalFetchedText);
}

sayHello();

What's the right way for showing a (.gif image file) loading before the request and hide this after Promise is resolved and the process is finished?

• javascript
• asynchronous
• async-await
• ecmascript-2017

• FYI, can also just do setTimeout(resolve, 2000, 'Stack Overflow'). I realize that's not the focus here, just saying you can do that. – Patrick Roberts Commented Dec 14, 2017 at 7:36

3 Answers 3

Most of time promises are abstracted into seprated module and are independent. So you should never do any other operation than async operation in the promises. You can show your gif while resolving the promises. See below code to show animation after you make async call, and hide it after resolution. You also have to handle reject scenario via try/catch/finally block.

function myPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Stack Overflow');
            // reject('Some Error')
        }, 2000);
    });
}

function showSpinner() {
  document.getElementById('loader').style.display = 'block';
}

function hideSpinner() {
  document.getElementById('loader').style.display = 'none';
}

async function sayHello() {
     try {
       showSpinner()
       const externalFetchedText = await myPromise();
       console.log('Hello ' + externalFetchedText);
     } catch (err) {
       console.error(err);
     } finally {
       hideSpinner()
     }
}

sayHello();

<img id="loader" style="display:none" src="http://chimplyimage.appspot./images/samples/classic-spinner/animatedCircle.gif" />

You can do it in the promise if you want all the calling code that uses this promise to display the loading animation.

function myPromise() {
    return new Promise(resolve => {
        // Show image
        setTimeout(() => {
            // Hide image
            resolve('Stack Overflow');
        }, 2000);
    });
}
async function sayHello() {
    const externalFetchedText = await myPromise();
    console.log('Hello ' + externalFetchedText);
}

sayHello();

function myPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            //resolve('Stack Overflow');
            reject('hello world');
        }, 2000);
    });
}
const newPromise = myPromise().then(result => {
   "hide here"
   return result;
}).catch(error => {
 "hide here"
  return error
});
async function sayHello() {
     const externalFetchedText = await newPromise;
     console.log('Hello ' + externalFetchedText);
}

sayHello();