如何在每个数据上传到服务器时显示进度或加载栏，并在通过时显示成功消息

Question

请我尝试改进此代码以在向服务器发送单独的答案时显示进度或加载栏。有时可能会发送多达 100 个答案，即向服务器发送 100 个发布请求。在我目前的方法中，用户将收到 100 条成功消息，这可能会非常令人困惑，根据经验，完成任务最多可能需要 3 分钟。

有没有办法让我在每个答案负载上传到服务器时显示进度条或加载栏，并在整个任务完成时显示成功消息？

export const uploadAnswers = async (type) => {

    getOfflineSavedAnswers(type).then(async answers => {
        if (answers && answers.length > 0) {
            try {
                for (const answer of answers) {
                    try {
                        await axios.post('/route/question/create-answer', answer)
                        .then(res => {
                            delAnswers()
                            ts(`Answers successfully submitted!`);
                        })
                        .catch(err => {
                            console.error(err);
                            te(`Answers submission failed!`)
                        });
                    } catch (error) {
                        te(`Answers submission failed!`)
                    }
                }
            } catch (error) {
                console.error(error);
                te(`Answers submission failed!`)
            }
        }

    });
};

Answer 1

使用一个额外的状态并将其初始值设置为 false。当您的答案开始上传时，此状态设置为 true。此时您可以显示如下所示的进度条。上传所有答案后，此状态设置为 false，因为进度条将被隐藏
const [成功，setSucess] = useState(false) export const uploadAnswers = async (type) => {

    getOfflineSavedAnswers(type).then(async answers => {
        if (answers && answers.length > 0) {
            try {
                for (const answer of answers) {
                    try {
                        await axios.post('/route/question/create-answer',answer)
                        .then(res => {
                            delAnswers()
                            setSucess(true)
                            ts(`Answers successfully submitted!`);
                        })
                        .catch(err => {
                            console.error(err);
                            
                        });
                    } catch (error) {
                        te(`Answers submission failed!`)
                    }
                }
                if(sucess){
                    ts(`Answers successfully submitted!`);
                }
                setSucess(false)
            } catch (error) {
                console.error(error);
                te(`Answers submission failed!`)
            }
        }

    });
};
return(
  {sucess? 'uploadin ans...' : null} //instead of this you can add 
                                                      // progress/loading 
)