部署的 Heroku 应用程序仅在刷新后工作(Node.js、Express.js、Jquery、Css、Html、TMDB API)

Deployed Heroku app only works after refreshing (Node.js, Express.js, Jquery , Css, Html, TMDB API)

各位,

我有一个应用程序,可让您使用电影数据库 API 搜索电影和电视节目。刷新页面后,该应用程序在 Heroku 上功能齐全。有没有办法加快应用程序的速度并允许它在没有初始刷新的情况下运行。

Heroku 应用 https://the-cinematic-app.herokuapp.com/

Github 存储库 https://github.com/kimanikelly/Cinematic

问题出在您 logic.js 中的 $.post('/token'...。 这里的问题是因为 ajax 是异步的,这意味着 JS 代码 继续执行。

这就是为什么 apiKey = sessionStorage.getItem('token'); 将没有时间在第一次访问页面时获得价值,因为你的 ajax 没有完成他的工作。

我认为在 $.post 和 $.ajax 中使用 async false 已被弃用,因为你的应用程序逻辑的很大一部分依赖于这个 apiKey,我会把你的 $.post... 每个 .click 正在使用 apiKey。

解决方案 2

我不想给你写一个 async/await 的概念,让你感到困惑 但你可以这样做

1) 添加异步 -> 告诉你的函数是异步的,你需要它,这样你就可以等待来自 ajax

的响应的承诺
$(document).ready(async () => {

2) 等待 ajax 完成

var token = await $.post('/token').then();

然后你可以在sessionStorage中设置或者设置变量使用。