Javascript 使用async/await and then（）如何在数组中保存结果

我正在练习我的javascript技能，做一个笑话机器，从API收集笑话并显示它们，我的问题是，目前我使用的是

。然后（）

，这很好，但我想知道如何在一个数组中获得结果，而不必等待

。然后（）

，就像

fetch笑话（）。然后（笑话=>console.log（笑话）；

我以前有一个导航数组的函数，如下所示：

let counter = 0;
let jokes = [joke1, joke2, joke3, joke4];

function nextJoke(jokes) {
  counter++;
  counter %= jokes.length; // start from 0 if we get to the end of the array
  return jokes[counter]; // give us back the actual item
}

这就是它在从API获取之前的使用方式

这是我目前的代码：

consturl=”https://api.icndb.com/jokes/random/5";
const fetchButton=document.querySelector（“button[type=button][value=Fetch]”；
异步函数{
让笑话=[]；
让data=await（await-fetch（url））.json（）；
for（设i=0；i<5；i++）{
笑话[i]=data.value[i]。笑话；
}
回敬笑话；
}
fetchButton.addEventListener（“单击”，（）=>{
fetch笑话（）.then（笑话=>console.log（笑话））；
})；

---

获取笑话

我不确定我是否理解这个问题……如果您想从异步api获取而不必使用。然后，或者必须等待，那么这是不可能的

根据我对问题的理解，如果您不想使用。那么每次，仅在数组为空时获取（仅获取一次）：

consturl=”https://api.icndb.com/jokes/random/5";
const fetchButton=document.querySelector（“按钮[type=button]
[value=Fetch]”；
设arr=[]
设计数器=0；
异步函数{
让data=await（await-fetch（url））.json（）；
for（设i=0；i<5；i++）{
arr[i]=data.value[i].joke；
}
}
函数nextJoke（笑话）{
常量项=笑话[计数器]
计数器++；
如果（计数器>=笑话长度）{
计数器%=长度；
}//如果到达数组的末尾，则从0开始
return item；//返回实际项目
}
fetchButton.addEventListener（“单击”，（）=>{
如果（arr.length==0）{
（笑）
.然后（（）=>console.log（nextJoke（arr）））
}否则{
控制台日志（nextJoke（arr））
}
});

有很多方法可以做到这一点。我建议您进一步研究。

您可以使用

fetch（）

检索url的数据。然后您必须使用

将其转换为json。然后（（resp）=>resp.json（））

之后，您可以将数据存储在

数组中


consturl=”https://api.icndb.com/jokes/random/5";
const fetchButton=document.querySelector（“button[type=button][value=Fetch]”；
const nextButton=document.querySelector（“按钮[type=button][value=Next]”；
const display=document.getElementById（“显示”）；
设计数器=0；
让笑话=[]；
nextButton.style.visibility='hidden'；//隐藏下一个按钮
fetchButton.addEventListener（“单击”，（）=>{
fetch（url）.然后（（resp）=>resp.json（））//将数据转换为json
.then（data=>（jokes=data.value，//设置笑话数组
fetchButton.style.visibility='hidden'，//隐藏获取按钮
nextButton.style.visibility='visible'）；//显示下一步按钮
});
addEventListener（“单击”，（）=>{
//播放下一个笑话
display.innerHTML=笑话[counter++%keops.length].id+“：”+笑话[counter++%keops.length]。笑话；
})；
取笑笑话
下一个笑话
这就是在不修改问题中代码片段的主要目的的情况下对我有效的方法


let计数器=0；
常量url=”https://api.icndb.com/jokes/random/5";
const fetchButton=document.querySelector（“button[type=button][value=Fetch]”；
异步函数{
让笑话=[]；
让data=await（await-fetch（url））.json（）；
for（设i=0；i<5；i++）{
笑话[i]=data.value[i]。笑话；
}
回敬笑话；
}
fetchButton.addEventListener（“单击”，（）=>{
fetchJokes（）.then（data=>（jokes=data））.then（data=>console.log（data））；
})；
获取笑话
嗯……您似乎已经在这样做了。是的，您已经从异步方法返回了一个数组。您不能（不应该）像以前那样将其存储在全局数组中。在请求仍在加载的情况下调用
nextJoke
函数时，您希望它做什么它必须等待自己-因此在全局变量B中存储数组的承诺，在承诺实现之前不会调用它-因此只需在
中声明它，然后
handler@Bergi我试图实现的是获取我的
数组
并在我的代码中使用它，而不必每次都在不同的位置获取它函数，请阅读，您提到我不应该将其存储在全局数组中，所以可能我的方法是错误的？另一个例子是，如果我尝试在
fetchcroples（）
函数之外
console.log（笑话）
。@Nava您不必每次都提取它，只要在任何地方等待相同的提取就足够了-您可以。另一种方法是将所有想要使用<代码>笑话的代码包装在一个大的<代码>然后<代码>回调中。这实际上是我想要实现的，但正如其他评论中提到的，我认为我的疑问是<代码>笑话<代码>的全球范围，或者说缺乏它。
const url = "https://api.icndb.com/jokes/random/5";
const fetchButton = document.querySelector("button[type=button]
[value=Fetch]");
let arr = []
let counter = 0;
async function fetchJokes() {
    let data = await (await fetch(url)).json();
    for (let i = 0; i < 5; i++) {
        arr[i] = data.value[i].joke;
    }
}

function nextJoke(jokes) {
    const item = jokes[counter]
    counter++;
    if (counter >=jokes.length){
        counter %= jokes.length;
    }// start from 0 if we get to the end of the array
    return item; // give us back the actual item
 }
fetchButton.addEventListener("click", () => {
    if (arr.length == 0){
        fetchJokes()
        .then(()=>console.log(nextJoke(arr)))
    }else{
        console.log(nextJoke(arr))
    }
  });