async/awaitとthen（）を使用して結果を配列に保存する

Question

APIからジョークを収集して表示するジョークマシンをJavaScriptスキルで練習していますが、現在私は.then()を使用していますこれは結構ですが、私はfetchJokes().then(jokes => console.log(jokes));

に私はこのような配列をナビゲート機能を持っていたよう.then()を待つ必要はありません配列内の私の結果を得るのですか知りたい：

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()を使用すると、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>