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 }

我曾经有一个像这样导航数组的函数：

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

在从API获取之前它是如何使用的。

这是我目前的代码：

＆＃13;

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

＆＃13;

fetchJokes()

＆＃13;

所以我已经想出了如何使用按钮和所有爵士乐，只是请求如何传递我从<table > <tr> <th>Date</th> <th>Name</th> <th>Comment</th> </tr> <tr> <td>2017/08/25</td> <td>Jackson</td> <td style="word-break: break-all">commentcommentcommentcommentcommentcommentcommentcommentcomment</td> </tr> </table>接收的对象并将其存储在数组中。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这对我有用，而不会修改问题中代码段的主要用途。

＆＃13;

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

＆＃13;

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

＆＃13;

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

DEMO codepen

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

使用async / await然后（）如何将结果保存在数组中

3 个答案: