如何跟踪在后端运行的方法的进度并在前端显示进度？

如何解决如何跟踪在后端运行的方法的进度并在前端显示进度？

我目前正在开发一个框架，其中我有一个 Python 后端、一个 API 文件作为通信层（也在 Python 中，使用来自 http.server 的 BaseHTTPRequestHandler）和一个 JavaScript/HTML 前端。我的框架目前的设置方式是用户在前端输入一些东西，这会触发使用 jQuery 的 POST 请求。

此 POST 请求提供要在后端（服务器）上运行的 Python 方法所需的输入。我遇到的问题是，只要该方法仍在运行，我就希望能够显示进度条并将其显示在用户界面（前端）上。

有人知道如何实现吗？

编辑：这是我当前架构的代码示例，前端有一个假进度条。

API：

class MyServer(BaseHTTPRequestHandler):
    def __init__(self,request: bytes,client_address,server) -> None:
        super().__init__(request,server)

    def do_POST(self):
        # Send our response code,header,and data
        self.send_response(200)
        self.send_header("Content-type","Application/json")
        self.send_header("Access-Control-Allow-Origin","*")
        self.send_header('Access-Control-Allow-Headers','Content-Type,Accept')
        
        body = self.rfile.read(int(self.headers['Content-Length']))
        print(body)
        try:
            body = json.loads(body)
        except ValueError:
            pass

        if self.path.startswith('/exampleRequest'):
            contentType = 'application/json'
            logging.info('Running Request...')
            my_list = []
            for i in tqdm(body['numbers']):
                my_list.append(i)
            response = json.dumps(my_list)
        self.end_headers()
        self.wfile.write(response.encode('UTF-8'))

if __name__ == "__main__":        
    webServer = HTTPServer(("",serverPort),MyServer)
    print("Server started http://%s:%s" % ("",serverPort))

    try:
        webServer.serve_forever()
    except KeyboardInterrupt:
        pass

前端（JavaScript/HTML）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function updateSettings(){
  $.ajax({
  url: "ip-address:port/exampleRequest",type: 'POST',data: 
      JSON.stringify({
          'numbers': selectedAlgos,})
  })
}
var i = 0;
function move() {
    if (i == 0) {
      i = 1;
      var elem = document.getElementById("myBar");
      var width = 10;
      var id = setInterval(frame,10);
      function frame() {
        if (width >= 100) {
          clearInterval(id);
          i = 0;
        } else {
          width++;
          elem.style.width = width + "%";
          elem.innerHTML = width  + "%";
        }
      }
    }
  }
</script>
<body>
<br><b>Progress:</b><br>
</div>
<div id="myProgress">
    <div id="myBar">0%</div>
  </div>
  <br><button onclick="updateSettings();move()">Submit</button><br>