处理加载.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，除了promise中的操作外，您不应执行任何其他操作。您可以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" />