使用异步/等待然后（）如何在数组中保存结果

Question

我正在练习我的JavaScript技能做一个笑话机器从一个API收集笑话，并显示它们，我的问题是，目前，我正在使用.then()这是很好的，但我想知道如何得到我的阵列中的结果不必等待.then()像fetchJokes().then(jokes => console.log(jokes));

我曾经有导航阵列像这样的功能：

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获取之前就是这样使用的。

这是我当前的代码：

const url = "https://api.icndb.com/jokes/random/5"; 
 
const fetchButton = document.querySelector("button[type=button][value=Fetch]"); 
 

 
async function fetchJokes() { 
 
    let jokes = []; 
 
    let data = await (await fetch(url)).json(); 
 
    for (let i = 0; i < 5; i++) { 
 
    jokes[i] = data.value[i].joke; 
 
    } 
 
    return jokes; 
 
} 
 

 
fetchButton.addEventListener("click",() => { 
 
    fetchJokes().then(jokes => console.log(jokes)); 
 
});

<button type="button" value="Fetch">Fetch Jokes</button>

所以我想通了如何使用按钮和所有的爵士乐，只是寻求帮助如何传递，即时通讯对象从fetchJokes()接收并将其存储在数组中。

Answer 1

这是为我工作，而无需修改的有关片段的主要目的。

let counter = 0; 
 
const url = "https://api.icndb.com/jokes/random/5"; 
 
const fetchButton = document.querySelector("button[type=button][value=Fetch]"); 
 

 
async function fetchJokes() { 
 
    let jokes = []; 
 
    let data = await (await fetch(url)).json(); 
 
    for (let i = 0; i < 5; i++) { 
 
    jokes[i] = data.value[i].joke; 
 
    } 
 
    return jokes; 
 
} 
 

 
fetchButton.addEventListener("click",() => { 
 
    fetchJokes().then(data => (jokes = data)).then(data => console.log(data)); 
 
});

<button type="button" value="Fetch">Fetch Jokes</button>

Answer 2

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

从我了解的问题，如果你不希望每次都用。那么，只有当数组为空取（只取一次）：

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)) 
    } 
    }); 

DEMO codepen

有有很多方法可以做到这一点。我建议你多看看Javascript Promises。

Answer 3

您可以使用fetch()来检索网址的数据。然后你必须将它转换成json，并且使用.then((resp) => resp.json())。

之后，您可以将数据存储在jokes阵列中。

const url = "https://api.icndb.com/jokes/random/5"; 
 
const fetchButton = document.querySelector("button[type=button][value=Fetch]"); 
 
const nextButton = document.querySelector("button[type=button][value=Next]"); 
 
const display = document.getElementById("display"); 
 
let counter = 0; 
 
let jokes = []; 
 

 
nextButton.style.visibility = 'hidden'; //Hide next button 
 

 
fetchButton.addEventListener("click",() => { 
 
    fetch(url).then((resp) => resp.json()) // Transform the data into json 
 
    .then(data => (jokes = data.value, //Set the array of jokes 
 
        fetchButton.style.visibility = 'hidden', //Hide fetch button 
 
        nextButton.style.visibility = 'visible')); //Show next button 
 
}); 
 

 
nextButton.addEventListener("click",() => { 
 
    //Show next joke 
 
    display.innerHTML = jokes[counter++ % jokes.length].id + " : " + jokes[counter++ % jokes.length].joke; 
 
});

<button type="button" value="Fetch">Fetch Jokes</button> 
 
<button type="button" value="Next">Next joke</button> 
 
<p id="display"></p>