Javascript 如何显示加载图标直到等待完成

我有一个带有wait fetch的异步函数。 我想向用户显示一个加载图标，直到等待完成，然后显示下一个div

                let getOTP = await fetch(url, {
                    method: 'POST',
                    headers: {
                        "Content-Type": "text/plain"     
                    },
                    body: JSON.stringify({
                        "Number": mobileNumber
                    })
                });

                let data = await getOTP.json();
                let errorCode = data.errorCode;
                if (errorCode == 0) {// show next div}

---

我曾尝试使用setTimeout（function（）{}，5000）函数，将其设置为5秒（或更长），但有时需要更长的时间才能收到回复。那么，如何显示加载图标直到等待完成？

在代码开头启动加载图像，并在没有错误且代码进入

（errorCode==0）

条件时停止加载图像

            <-- START loading Here -->
            let getOTP = await fetch(url, {
                method: 'POST',
                headers: {
                    "Content-Type": "text/plain"     
                },
                body: JSON.stringify({
                    "Number": mobileNumber
                })
            });

            let data = await getOTP.json();
            let errorCode = data.errorCode;
            if (errorCode == 0) {
               <-- STOP loading Here -->
            }else{
               <-- STOP loading Here on error -->
            }

让getOTP=wait fetch（url{
方法：“POST”，
标题：{
“内容类型”：“文本/普通”
},
正文：JSON.stringify({
“号码”：手机号码
})
});
让data=wait getOTP.json（）；
设errorCode=data.errorCode；
如果（错误代码==0）{
}否则{
}

只需在获取前显示加载程序，并在等待后将其删除即可

const fetchButton=document.querySelector（“#fetchButton”）
const loader=document.querySelector（“#loader”）
const content=document.querySelector（“#content”）
函数fetchData（）{
//这里应该是您的api调用，我在这里使用setTimeout只是为了异步示例
返回新承诺（resolve=>setTimeout（resolve，2000，“我的内容”））
}
fetchButton.onclick=异步函数（）{
content.innerHTML=“”
//你的加载器样式，我的只是我显示和隐藏的文本
loader.style.display='block'
const nextContent=等待获取数据（）
loader.style.display='none'
content.innerHTML=nextContent
}

Fetch
加载。。。

只需将代码隐藏在调用

wait

的行后面即可。使用

try

/

finally

确保在异步调用出错时也执行代码

您可以将此机制封装在一个函数中，如下图所示的

WithIcon

函数，以便在不同的位置重用它

//测试函数
异步函数测试（）
{
等待图标（超时（3000））；
testAfterAction（）；
}
函数testAfterAction（）
{
var elem=document.createElement（'div'）；
elem.innerText=“一些文本”；
文件.正文.附件（elem）；
}
//使用setTimeout符号化某些异步i/o操作
功能超时（毫秒）
{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
//等待承诺时，显示等待图标
带图标的异步函数（承诺）
{
showwaiting（）；
尝试
{
等待承诺；
}
最后
{
隐藏等待（）；
}
}
//仅在每次ShowWaiting呼叫遇到HideAwaiting呼叫时隐藏图标
var globalAwaitingCounter=0；
//显示等待图标
函数showwaiting（）
{
如果（globalAwaitingCounter您应该从后端接收到一个事件来停止计费。您将setTimeout调用放在哪里？将其与其他代码一起显示在上下文中，请注意，如果加载失败，为什么您不想隐藏加载图标？我添加了代码，但这不是向下投票的正确方式。您只能放一条注释。您可以看到，OP没有提供完整的代码，因此我们无法想象代码中应该遵循的步骤。您应该使用“最后一次尝试”，以确保加载图标在出现问题时也被隐藏loading@NineBerry当然，如果您使用的是可以抛出的RealFetchAPI或axios，则必须处理错误例如
setTimeout
肯定不会抛出：）尽管如此，如果在
fetchData
函数中处理错误，并且不会影响加载切换功能，则不需要使用
finally
大小写。