处理异步函数以加载.gif图像的正确方法是什么？

Question

例如，看看这段代码：

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

sayHello();

在请求之前显示（.gif图像文件）加载的正确方法是什么，并在Promise解决并且过程完成后隐藏它？

Answer 1

大部分时间promises被抽象为分离模块并且是独立的。所以你永远不应该在承诺中做async操作以外的任何其他操作。你可以在解决承诺的同时展示你的gif。进行async调用后，请参阅下面的代码以显示动画，并在解析后隐藏它。你还必须通过reject块处理try/catch/finally场景。

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.com/images/samples/classic-spinner/animatedCircle.gif" />

Answer 2

如果您希望使用此承诺的所有调用代码显示加载动画，则可以在promise中执行此操作。

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();

Answer 3

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();