使用 async/await 获取弹出框交互结果

利用async/await 关键字，我们可以优雅的处理异步逻辑。

比如调用网络接口可以直接await fetch(……)

事实上，在处理页面交互逻辑时使用async/await，也可以起到很好的解耦作用，写出更清晰的代码。

比如获取Modal弹框的交互结果：

直接看效果： DEMO on github

后台系统在交互设计上经常使用模态弹框。很多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