react后台数据渲染(封装) loading 处理

//初始化数据

 componentDidMount() {

this.request();

  }

//调接口

  request=()=>{

    axios.get("https://www.easy-mock.com/mock/5d98c57b8c63954ea11dd31e/table").then((res)=>{

      console.log(JSON.stringify(res));

if(res.status=="200" && res.data.code==0){

  this.setState ({

    dataSource2:res.data.result     //dataSource2接收后台数据

  }) 

}

    })

  }

}

渲染

 return (

      <div>

 <Card title="动态渲染表格">

        <Table

          columns={columns}

          dataSource={this.state.dataSource2}

          // pagination={false}

        />

      </Card>

 </div>

)

封装方法

axios/index,js文件中

static ajax(options){

        let loading;

        if (options.data && options.data.isShowLoading !== false){

            loading = document.getElementById('ajaxLoading');

            loading.style.display = 'block';

        }  //loading处理

        let baseApi = 'https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api';

        return new Promise((resolve,reject)=>{

            axios({

                url:options.url,

                method:'get',

                baseURL:baseApi,

                timeout:5000,

                params: (options.data && options.data.params) || ''

            }).then((response)=>{

                if (options.data && options.data.isShowLoading !== false) {

                    loading = document.getElementById('ajaxLoading');

                    loading.style.display = 'none'; 

                }  //loading处理

                if (response.status == '200'){

                    let res = response.data;

                    if (res.code == '0'){

                        resolve(res);

                    }else{

                        Modal.info({

                            title:"提示",

                            content:res.msg

                        })

                    }

                }else{

                    reject(response.data);

                }

            })

        });

    }

组件中调用方法

 componentDidMount(){

        this.request();

    // 动态获取mock数据

    request = ()=>{

        let _this = this;

        axios.ajax({

            url:'/table/list',

            data:{

                params:{

                    page:this.params.page

                }

            }

        }).then((res)=>{

            if(res.code == 0){

                res.result.list.map((item, index) => {

                    item.key = index;

                })

                this.setState({

                    dataSource2:res.result.list,

                    selectedRowKeys:[],

                    selectedRows:null,

                    pagination: Utils.pagination(res,(current)=>{

                        _this.params.page = current;

                        this.request();

                    })

                })

            }

        })

    }

}

最后

以上就是现代金针菇为你收集整理的react后台数据渲染(封装) loading 处理的全部内容，希望文章能够帮你解决react后台数据渲染(封装) loading 处理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。