使用antd的Modal.method展示异步请求数据详情，再次封装成函数api直接调用

使用antd写项目多了，经常会有相似的场景——使用Modal弹窗，请求异步数据后显示详情。一般都会写个弹窗详情组件，并且用visible和loading参数去维护，写多了这样的业务需求，总会觉得烦琐。还好antd3以上提供了Modal.update方法，我们可以自己封装一个简单的请求数据查看详情的方法。

封装showModal方法

import { Modal, Spin } from 'antd';
import request from 'UTILS/request';
/*
*  用于简单modal弹窗，并且异步请求数据
*/
export default function showModal({
    reqData={}
    contentRender,
    ...rest
}) {
    let _modal = Modal.info({
        content: <Spin />,
        onOk: () => {
            _modal = null;
        },
        ...rest
    });

    request(reqData).then(res => {
        if (_modal) {
            _modal.update({
                content: contentRender(res),
            });
        }
    })
}

使用showModal方法

function Index() {
	function showDetail() {
		showModal({
			reqData: {
				url: '/getList',
				body: {
					page: 1,
				}
			},
			contentRender: res => {
				if (res.success) {
					return (
						<Table 
							columns={[{ title: '标题', dataIndex: 'title' }]}
							dataSource={res.data}
						/>
					);
				} else {
					return <p>暂无数据</p>;
				}
			}
		})
	}

	return (
		<div>
			<Button onClick={showDetail}>查看详情</Button>
		</div>
	);
}