代码之家  ›  专栏  ›  技术社区  ›  Enoy

通信异步加载端到反应接口

  •  0
  • Enoy  · 技术社区  · 7 年前

    有一个名为jsonheader的类,它让我们加载每个json:

    import jQuery from 'jquery-ajax';
    import Atlas from "./Atlas";
    
    export default class JSONHeader {
        constructor(location) {
            loadAtlasStructure(location);
    
            function loadAtlasStructure(location) {
                jQuery.ajax({
                    dataType: "json",
                    url: location,
                    async: true,
                    success: function (files) {
                        files.map((file) => {
                            jQuery.ajax({
                                dataType: "json",
                                url: location + file,
                                async: true,
                                success: function (data) {
                                    console.log(data);
                                    if (!window.IndexAtlas) {
                                        window.IndexAtlas = new Atlas();
                                    }
                                    window.IndexAtlas.addSubAtlas(data);
                                    console.log('JSONHeader::window.IndexAtlas', window.IndexAtlas);
                                }
                            });
                        })
                    }
                })
            }
        }
    }
    

    在加载了所有json之后,我想将react的顶级组件app从isloading:true更改为isloading:false。我们怎样才能做到这一点呢?。目前,每次重新加载所有json时,我都要等待5秒

    import React, {Component} from 'react';
    import BrowserRouter from "react-router-dom/es/BrowserRouter";
    import Switch from "react-router-dom/es/Switch";
    import Route from "react-router-dom/es/Route";
    import Redirect from "react-router-dom/es/Redirect";
    import ScenePage from "../ScenePage/index";
    import CoverPage from "../CoverPage/index";
    import {INDEX, SCENE_PAGE} from "../../constantRoutes";
    import JSONHeader from "../../newModel14Junio/JSONHeader";
    
    export default class App extends Component {
        constructor(props) {
            super(props);
    
            const header = new JSONHeader('/atlas/json/');
    
            this.state = {
                isAtlasLoading: true
            };
    
            setTimeout(() => {
                this.setState({isAtlasLoading: false});
            }, 5000);
        }
    
        render() {
            if (this.state.isAtlasLoading) {
                return (<div>Atlas loading</div>);
            }
            return (
                <BrowserRouter>
                    <div>
                        <Switch>
                            <Route exact path={INDEX} component={CoverPage}/>
                            <Route path={SCENE_PAGE} component={() => <ScenePage IndexAtlas={window.IndexAtlas}/>}/>
                            <Redirect from="*" to={INDEX}/>
                        </Switch>
                    </div>
                </BrowserRouter>
            );
        }
    }
    

    谢谢你的帮助。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Matheus Pitz    7 年前

    使用超时来完成这项工作不是一个好主意,因为你不知道它将花费多少时间来完成。因此,可以向jsonheader添加回调,如下所示:

    import jQuery from 'jquery-ajax';
    import Atlas from "./Atlas";
    
    export default class JSONHeader {
        constructor(location, callback) {
            loadAtlasStructure(location);
    
            function loadAtlasStructure(location, callback) {
                jQuery.ajax({
                    dataType: "json",
                    url: location,
                    async: true,
                    success: function (files) {
                        files.map((file) => {
                            jQuery.ajax({
                                dataType: "json",
                                url: location + file,
                                async: true,
                                success: function (data) {
                                    console.log(data);
                                    if (!window.IndexAtlas) {
                                        window.IndexAtlas = new Atlas();
                                    }
                                    window.IndexAtlas.addSubAtlas(data);
                                    console.log('JSONHeader::window.IndexAtlas', window.IndexAtlas);
                                    callback();
                                }
                            });
                        })
                    }
                })
            }
        }
    }
    

    在reactjs中,只需创建一个回调并在调用jsonheader时传递它:

    import React, {Component} from 'react';
    import BrowserRouter from "react-router-dom/es/BrowserRouter";
    import Switch from "react-router-dom/es/Switch";
    import Route from "react-router-dom/es/Route";
    import Redirect from "react-router-dom/es/Redirect";
    import ScenePage from "../ScenePage/index";
    import CoverPage from "../CoverPage/index";
    import {INDEX, SCENE_PAGE} from "../../constantRoutes";
    import JSONHeader from "../../newModel14Junio/JSONHeader";
    
    export default class App extends Component {
        constructor(props) {
            super(props);
    
            const finishCallback = () => {
                this.setState({isAtlasLoading: false});
            };
    
            const header = new JSONHeader('/atlas/json/', finishCallback);
    
            this.state = {
                isAtlasLoading: true
            };        
        }
    
        render() {
            if (this.state.isAtlasLoading) {
                return (<div>Atlas loading</div>);
            }
            return (
                <BrowserRouter>
                    <div>
                        <Switch>
                            <Route exact path={INDEX} component={CoverPage}/>
                            <Route path={SCENE_PAGE} component={() => <ScenePage IndexAtlas={window.IndexAtlas}/>}/>
                            <Redirect from="*" to={INDEX}/>
                        </Switch>
                    </div>
                </BrowserRouter>
            );
        }
    }
    

    我希望我能帮助你。