Question

例如，请查看以下代码：

＆＃13;

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

＆＃13;

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

Answer 1

大多数时间promises被抽象为分离模块并且是独立的。因此，您绝不应该在承诺中执行除async操作之外的任何其他操作。您可以在解决承诺时显示gif。进行async调用后，请参阅以下代码以显示动画，并在解决后隐藏它。您还必须通过reject阻止处理try/catch/finally方案。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: