利用async/await 关键字,我们可以优雅的处理异步逻辑。
比如调用网络接口可以直接await fetch(……)
事实上,在处理页面交互逻辑时使用async/await,也可以起到很好的解耦作用,写出更清晰的代码。
比如获取Modal弹框的交互结果:
后台系统在交互设计上经常使用模态弹框。很多UI框架都提供了方便易用的Modal组件,比如Ant design: Antd Modal
先来看一下antd官方的demo是怎么做的:
import { Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false } // 还是需要维护一个visible state用来控制Modal的显示状态
showModal = () => {
this.setState({
visible: true,
});
}
handleOk = (e) => {
this.setState({
visible: false,
});
}
handleCancel = (e) => {
this.setState({
visible: false,
});
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
复制代码
以上代码可以看出:受制于React通常的写法,在频繁使用Modal的场景下Antd的封装使用起来还是有些繁琐
- 还是需要维护一个visible state,用来控制Modal是否显示
- 如果外层组件只需要获取Modal内操作的结果,需要用props传递一个onChange方法进来,或者借助笨重的全局状态管理机制
- 大量使用Modal时,会产生海量的重复代码
- ……
当然,作为中后台系统的优秀解决方案,Antd的小伙伴帮我们封装了Modal.methods可以快速的创建一些简易的弹窗:
Modal.confirm({
title: 'Confirm',
content: 'Bla bla ...',
okText: '确认',
cancelText: '取消',
});
复制代码
这是一个不错的思路,但是Antd官方提供的methods功能非常有限。
我们来看一看能否在Antd Modal的基础上做一些改进:
希望能够实现result = await Modal.open()
这样的调用方式。
一种思路是在实现一个Modal class,上面有static open这样一个方法,当调用open时,向页面插入一个modal,类似上面Modal.confirm的做法。
另一种办法,可以先在页面实例化一个modal,需要open的时候利用ref attribute获取到已经实例化的modal,并调用它的open 方法。 如下:
import React from 'react';
import { Modal, Input } from 'antd';
export default class