javascript - Vanilla JS Async 无法在 Heroku Flask Web App 上运行

Question

制作了一个具有基本 JS 功能的 Flask Web 应用程序，在用户提交按钮后充当计时器。

它在本地工作得非常好，但是一旦部署到 Heroku，异步函数就不起作用，并且 Heroku 返回超时错误 503（因为正如预期的那样，应用程序调用的 python 脚本需要超过 1 分钟才能运行，而 heroku 有然后触发超时限制）。

这是我从日志中得到的错误：

2021-06-26T14:19:24.650542+00:00 app[web.1]: 10.35.168.144 - - [26/Jun/2021 14:19:24] "[37mGET / HTTP/1.1[0m" 200 -
2021-06-26T14:19:57.520038+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=POST path="/" host=python-url-crawler.herokuapp.com request_id=3dacf2e6-3873-4997-85db-aa747780b0f2 fwd="93.38.66.14" dyno=web.1 connect=0ms service=30001ms status=503 bytes=0 protocol=https

考虑到 web 应用程序在其他方面可以完美运行，但我需要在用户单击提交后立即在 html 主页中显示一条消息，这不起作用（所以我假设问题出在异步中)

我的档案：

web: python main_app.py

我的 package.json：

{
  "name": "url-crawler",
  "version": "1.0.0",
  "description": "this is just to start the JS function (supposedly).",
  "main": "/static/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }, 
  
  "engines": { 
    "node": "7.10.0",
    "npm": "4.2.0"
  },
  
  "author": "carlo-occhiena",
  "license": "MIT"
}

我的要求.txt

beautifulsoup4==4.9.3
Flask==1.1.2
Flask-Cors==3.0.4
gunicorn==20.0.4
Jinja2==2.11.2
json5==0.9.1
lxml==4.2.1
requests==2.25.1
stop_words==2018.7.23

我的树：

\static
   -main.js
   -mystyle.css
\templates
   -main.html
Procfile
main_app.py
package.json
requirements.txt
runtime.txt

这是我的异步函数：

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  
  async function stamp() {
    document.getElementById("stamp1").innerHTML = "Process started...";
    await sleep(10000);
    document.getElementById("stamp2").innerHTML = "...we're going, please hold. 10 sec. passed.";
    await sleep(10000);
    document.getElementById("stamp3").innerHTML = "...script running. 20 sec passed.";
    await sleep(10000);
    document.getElementById("stamp4").innerHTML = "...script running. 30 sec passed.";

  }

一旦用户单击 main.html 中的提交，就会调用该函数：

<p><input type="submit" value="Scan!" onclick = "stamp()" /></p>

最后这是我希望看到 js 函数打印的值的 html 部分：

    <p><input type="submit" value="Scan!" onclick = "stamp()" /></p>
        </form>

        <div id="stamp">
            <p id="stamp1"></p>
            <p id="stamp2"></p>
            <p id="stamp3"></p>
            <p id="stamp4"></p>
        </div>

    </div>

    <script src="static/main.js"></script>
</body>

我没有找到其他正确的答案（如您所见，我在尝试寻找解决方案时实现了不必要的复杂 package.json）

有人可以帮助我理解为什么在 Heroku 上部署应用程序时单击提交按钮后我没有看到打印到 main.html 的异步函数的结果吗？

非常感谢！

标签： javascriptasynchronousheroku