javascript - 从慢速 api 中获取图像

Question

我确信我的问题很明显，但我无法在任何地方找到简单的答案。我不熟悉 redux/flux 所以我不知道我是否需要学习它们来实现我的目标。 我从我的服务器 url 获取我需要在组件上显示的图像。我想显示加载程序直到获取图像。 最好(也是最简单)的方法是什么？有必要使用 flux/redux 吗？ 我可以只使用 fetch(image_URL).then... promise 吗？

现在在渲染 img html 标签时调用 url:

{this.props.data.images.map(img=>{
return(
  <img src={img.url}/>
)})

如何管理这个任务的异步？我已经使用 apollo 来获取本地数据库数据。我可以使用 apollo 获取外部数据吗？

Answer 1

最简单的方法是定义一个加载标志并使用它来确定加载程序是否应该被渲染。看起来您的提取逻辑在其他地方，但想法是一样的。

class YourComponent() extends Component {
    constructor() {
        this.state = {
            isLoading: false,
        };
    }

    componentWillMount() {
        this.setState({isLoading:true});
        fetch('image_URL')
        .then(res => {
            this.setState({
                images: res.images,
                isLoading: false,
            })
        })
    }

    render() {
        const { isLoading , images} = this.state;

        if (isLoading) {
            return <YourLoaderComponent />
        }

        return (
            <div>
                {images.map(img => <img src={img.url} />)}
            </div>
        );
    }
}