Javascript如何使用事件侦听器和承诺_Javascript_Promise_Async Await_Local Storage_Composition

Javascript如何使用事件侦听器和承诺

javascript

Javascript如何使用事件侦听器和承诺,javascript,promise,async-await,local-storage,composition,Javascript,Promise,Async Await,Local Storage,Composition,嘿，我正在学习如何使用异步函数从API接收的对象加载本地存储，代码实际上可以工作，但当我尝试循环使用响应对象创建的数组时，遇到了一个问题，我有两个按钮，一个接一个地在数组元素中循环，但除非重新加载页面，否则它们不会工作。如果我检查控制台，我可以看到本地存储中的对象，并弹出此错误： uncaughttypeerror:无法读取null的属性“length” 在Object.nextJoke（bundle.js:10332）在htmldevelment.jokeContainer.addEvent

嘿，我正在学习如何使用异步函数从API接收的对象加载本地存储，代码实际上可以工作，但当我尝试循环使用响应对象创建的数组时，遇到了一个问题，我有两个按钮，一个接一个地在数组元素中循环，但除非重新加载页面，否则它们不会工作。如果我检查控制台，我可以看到本地存储中的对象，并弹出此错误：

uncaughttypeerror:无法读取null的属性“length”
在Object.nextJoke（bundle.js:10332）
在htmldevelment.jokeContainer.addEventListener.event上

我目前的代码是：

JS:：

HTML:：

<body>
  <div class="joke-container">
    <div class="joke-text">
      <p>Fetch some jokes bro!!</p>
    </div>
    <div class="joke-controls">
      <button type="button" value="Prev">Prev</button>
      <button type="button" value="Next">Next</button>
    </div>
  </div>
</body>


拿些笑话来，兄弟
上
下一个

我知道我的问题与我的承诺链或作文有关，但在阅读之后

我真的不知道如何处理这个问题。

我可能在这里遗漏了一些东西-您在代码中使用的

promise

？我确实看到你在等待url响应-这就是你所指的吗？你到底有什么问题？@Zze在我看来不是，记得每次重新加载时删除本地存储，因为在第一次重新加载后，它将始终工作。啊，我终于在运行你的代码时得到了它。第一次运行它时，

jokesArray

为空，因为它还不在本地存储中。但是当您解析它时，您不会分配

jokesArray=jokesData

，您只会将它保存在本地存储中。因此，

jokesArray

保持为空，即使在您获取它之后也是如此。因此，要修复此键入错误，请将

jokesArray

更改为

let

，并在

fetchjones

中将其设置为

jokesArray=jokesData

@凯伊多：太棒了，这确实解决了我的问题，你应该把它作为答案发布！。

<body>
  <div class="joke-container">
    <div class="joke-text">
      <p>Fetch some jokes bro!!</p>
    </div>
    <div class="joke-controls">
      <button type="button" value="Prev">Prev</button>
      <button type="button" value="Next">Next</button>
    </div>
  </div>
</body>