Я практикую свои навыки работы с 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(), и сохранить его в массиве.

2
ricardoNava 25 Авг 2017 в 10:25

3 ответа

Лучший ответ

Это то, что сработало для меня без изменения основной цели фрагмента в вопросе.

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>
1
ricardoNava 27 Авг 2017 в 22:02

Я не уверен, что понимаю вопрос ... Если вы хотите получить из асинхронного 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,

0
Francisco Flores 25 Авг 2017 в 10:21

Вы можете использовать fetch() для получения данных URL. Затем вы должны преобразовать его в 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>
2
Weedoze 25 Авг 2017 в 09:16