时间戳

首页 > 解决方案 > 如何在不渲染整个组件以进行实时提要的情况下无限发送请求

javascript - 如何在不渲染整个组件以进行实时提要的情况下无限发送请求

问题描述

我通过实时提要从后端（Django Rest）接收无限图像，每次实时提要都提供单独的唯一图像，我想在组件的 div 中显示反应，每次有一个图像响应并且我想显示它一个组件的 div，首先我尝试了一个无限函数，它无限地向 api 发送请求并每次都获取单个图像作为响应，但是通过这种方式，整个页面重新加载我只希望 div 重新加载其中图像来自后端并且无需重新加载即可更改整个页面，什么是最好的方法？

runInfinite=()=>{

        axios.post('http://127.0.0.1:8000/faceapp/process_image/')
            .then(res => {
                this.setState({baseimage: res.data})
            });
    };

render(){
          if (this.state.flag){           // flag will always be true for infinite run
            this.runInfinite()
        }
return(   
         <div>
           {this.state.baseimage?<img  src={"data:image/png;base64," +  this.state.baseimage}/>:<h1>Hello</h1>}  // get image(single) from request's response
         </div>
)
}

如何在不重新加载整个组件的情况下从请求中获取图像，还有其他更好的方法来实现这一点吗？

标签： javascriptreactjsdjango-rest-frameworkaxios

解决方案

更好的方法是你应该使用套接字。但如果您不需要，您可以使用特定的时间间隔调用 runInfinite() 方法：

render(){
   if (this.state.flag){
        setInterval(()=> { this.runInfinite(); }, 1000);
   }
}

指定适合您的时间。

推荐阅读