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

【问题标题】：What's the right way for handling Async functions for loading a .gif image?处理加载 .gif 图像的异步函数的正确方法是什么？
【发布时间】：2018-05-28 05:11:35
【问题描述】：

例如看这段代码：

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 并完成过程后隐藏它的正确方法是什么？

【问题讨论】：

仅供参考，也可以只做setTimeout(resolve, 2000, 'Stack Overflow')。我意识到这不是这里的重点，只是说你可以做到。

标签： javascript asynchronous async-await ecmascript-2017

【解决方案1】：

如果你想让所有使用这个promise的调用代码显示加载动画，你可以在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();

【讨论】：

对于像这样将加载动画切换与资源获取紧密结合起来并不是一个很好的论据。在考虑关注点分离时，我更喜欢@VipinKumar's take。

【解决方案2】：

大部分时间promises 被抽象成独立的模块并且是独立的。因此，除了async 操作之外，您不应该在 Promise 中执行任何其他操作。您可以在解决承诺时显示您的gif。请参阅下面的代码以在您拨打async 后显示动画，并在解决后将其隐藏。您还必须通过 try/catch/finally 块处理 reject 场景。

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

&lt;img id="loader" style="display:none" src="http://chimplyimage.appspot.com/images/samples/classic-spinner/animatedCircle.gif" /&gt;

【讨论】：

【解决方案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();

【讨论】：