如何在等待响应时在网站上呈现加载页面

Question

我目前正在使用NodeJS和express构建一个Web应用程序。此应用程序的一个功能是让用户上传图像（然后将其存储在云服务器中）。但是，我发现这有时会花费很多时间，并且服务器正在等待响应。我尝试添加一个加载屏幕，但仅在网站加载时才触发，而不是在等待响应时触发（如上述情况）。这是加载屏幕的代码

<div class="loader">
   <img src="/loading.gif" alt="Loading..." />
</div>

<script>
        window.addEventListener("load", function () {
        const loader = document.querySelector(".loader");
        loader.className += " hidden"; // class "loader hidden"
    });
</script>

有一些CSS，我不在这里发布，但是此加载屏幕工作正常。这是处理请求的部分。

router.post('/campgrounds',middleware.isLoggedIn, upload ,(req,res)=>{
    //BELOW PROCESS TAKES LOT OF TIME
    //ADD A LOADING SCREEN HERE TILL IT REACHES "SUCCESS"
    cloudinary.uploader.upload(req.file.path, function(error, result) {
    if(error) {
        req.flash('error', err.message)
        return res.redirect('back')
    }
    // add cloudinary url for the image to the campground object under image property
    req.body.campground.image = result.secure_url;
    req.body.campground.imageId = result.public_id;
    req.body.campground.author = {
        id: req.user._id,
        username: req.user.username
    }
    Campground.create(req.body.campground, function(err, campground) {
        if (err) {
        req.flash('error', err.message);
        return res.redirect('back');
        }
        console.log("SUCCESS")
        req.flash("success","Successfully posted")
        res.redirect('/campgrounds/' + campground.id);
    });
    });
})

如上所述，我要在上传时渲染加载屏幕。客户端等待响应时我该怎么做？任何帮助，不胜感激

Answer 1

我想您知道您的网站何时发出请求。

在处理创建请求的函数中，您可以在html的某个位置添加加载图标，然后可以侦听response.on（'end'）或类似内容。

一旦收到响应，您就可以摆脱加载程序，并用数据替换它。