react项目同一界面不同组件间的请求方法执行顺序问题

react项目同一界面不同组件间的请求方法执行顺序问题

最近碰到一个有点棘手的问题；layout中包含头部组件header组件，路由组件，路由组件中包含了首页等其他页面组件，页面组件用的都是类组件；
比较复杂的登陆功能放在了头部组件执行，由于头部组件需要展示登陆状态和用户名称等信息；而首页几个图表的数据接口需要在登陆成功之后才能请求成功；否则会提示error“用户未登陆或登陆超时”’，获取不到接口的数据；请求方法都放在了compoentDidMount中执行；出现的问题就是项目第一次打开首页无法渲染出图表数据，第二次之后打开后正常有数据；通过控制台log出是由于第一次是执行首页请求数据时，登陆接口未请求完成，后端接口判断为未登陆状态；
所以必须要先等登陆完成之后再执行别的数据请求；如果在一个组件的话处理简单；不同的组件不是很好处理这种方法顺序问题；
解决方法：EventEmitter公交车来控制请求方法的执行顺序；等header组件中login请求成功后emit出当前登录状态；在homePage组件compoentDidMount中接收,接收到之后再执行请求即可；
新建一个eventbus.js文件，在需要通信的不同组件之后引入；

//eventbus.js
import {EventEmitter} from 'events';
export default new EventEmitter();

//header.js
 await http.post('/api/common/login/ystLogin', request).then((res) => {
                    if (res.code == StatusCode.RFESA04) {
                        isLogin = false;//只拦截无登录权限的
                    }
                    else {
                        users.removeMyPersonalInfo();
                    }
                    eventbus.emit('isLogin',isLogin);
                })

//homePage.js
 componentDidMount() {
        eventbus.on('isLogin', (msg) => {
            console.log('接收的值', msg);
            if (msg) {
                this.getAbTrxNumData();
                this.initChartsData();
            }
        })
    }