react-开发经验分享-async与生命周期函数

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

初衷是希望能把自己在公司做react开发中

遇到的一些经验或踩过的坑

做个记录警示自己

后来想想

分享出来给同样的前端学习者

减少大家的开发时间

互相学习共同进步

每篇分享或多或少

大家将就着看吧

react里，生命周期函数也是可以使用 async await，使函数内部的异步数据同步执行，使用方法与其他函数一样

// 如下
// 初始化渲染执行之前调用
// 此处可以做后端接口请求
// 直接写在生命周期函数内部
async componentDidMount() {
    let userId = this.props.user.profile.Organization;
    let initData = await initialApi.getOrganization(userId);
    let initList = initData.extension || [];
}

// 或者
// 封装定义一个请求方法，在生命周期函数里调用
componentDidMount() {
    this.initRequest();
}

initRequest = async () => {
    let userId = this.props.user.profile.Organization;
    let initData = await initialApi.getOrganization(userId);
    let initList = initData.extension || [];
}

需要注意的是，这样并不会改变生命周期函数自己原来的执行顺序