使用異步/等待然后then（）如何將結果保存在數組中

Question

我正在用玩笑.then()來.then()我的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()接收到的對象並將其存儲在Array中。

Answer 1

您可以使用fetch()來檢索URL的數據。 然后您必須使用.then((resp) => resp.json())將其轉換為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> 

Answer 2

這是對我有用的，而無需修改問題中代碼片段的主要目的。

 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 3

我不確定我是否理解問題...如果您想從異步api中獲取數據，而不必使用.then或不必等待，那么這是不可能的。

根據我對問題的了解，如果您不想每次使用.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))
    }
  });

演示碼筆

有很多方法可以做到這一點。 我建議您進一步研究Javascript Promises 。