ant-design-结合-golang-实现进度条

对于进度条的实现，可以使用 ant design 的 Progress 组件，同时结合 golang 的 goroutine 实现异步更新进度。

首先，在前端页面中引入 ant design 的 Progress 组件：

import { Progress } from 'antd';

然后，在组件中定义一个 state 保存进度条的进度：

class ProgressBar extends React.Component {
  state = {
    percent: 0,
  };

  render() {
    return <Progress percent={this.state.percent} />;
  }
}

接下来我们在后端使用 golang 实现一个增加进度的函数：

func updateProgress(percent *int, done chan bool) {
    for i := 0; i <= 100; i++ {
        *percent = i
        time.Sleep(time.Millisecond * 50)
    }
    done <- true
}

updateProgress 函数接收一个 int 类型的指针和一个 channel，每 50 毫秒更新一次进度条，并在进度达到 100 后向 channel 发送一个 true 值，表示完成了进度更新。

最后，我们在组件中启动一个 goroutine，异步调用 updateProgress 函数更新进度条：

class ProgressBar extends React.Component {
  state = {
    percent: 0,
  };

  componentDidMount() {
    const done = make(chan bool);
    go updateProgress(&this.state.percent, done);
    go func() {
      <-done
      // 进度更新完成后执行一些操作
    }()
  }

  render() {
    return <Progress percent={this.state.percent} />;
  }
}

在 componentDidMount 函数中，我们创建一个 channel 和一个 goroutine，异步调用 updateProgress 函数更新进度条，同时在另一个 goroutine 中等待 updateProgress 函数完成后执行一些操作。

这样，我们就通过结合 ant design 和 golang 实现了一个简单的进度条。