たとえば、このコードを見て：.gifイメージをロードするための非同期関数を処理する正しい方法は何ですか？
function myPromise() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Stack Overflow');
}, 2000);
});
}
async function sayHello() {
const externalFetchedText = await myPromise();
console.log('Hello ' + externalFetchedText);
}
sayHello();とプロセス終わった？
この約束を使用するすべての呼び出しコードで読み込みアニメーションを表示することができます。
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]（https://stackoverflow.com/a/47808051/1541563）を好んでいます。 –
ほとんどの場合、promisesは、分離されたモジュールに抽象化され、独立しています。したがって、約束どおりにasync操作以外の操作を行うべきではありません。約束を解決しながら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();<img id="loader" style="display:none" src="http://chimplyimage.appspot.com/images/samples/classic-spinner/animatedCircle.gif" />デモでいい説明+1私から – programtreasures
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();
FYI、また、単に ''のsetTimeout（決意、2000年、 'スタックオーバーフロー'）を行うことができます。私はそれがここの焦点ではなく、ただあなたがそれを行うことができると言います。 –