呈现 API 个结果

Question

我正在尝试呈现以下 API 的“借口”结果。 'https://excuser.herokuapp.com/v1/excuse' 我遵循了几个教程，例如这个 (https://www.youtube.com/watch?v=uxf0--uiX0I) 我能够使用 button/onclick 提取数据，但是，每当我尝试实际访问时，他们的方法总是生成“未定义” 属性我需要出来的结果是“借口”。

能否请您告诉我如何更新下面的代码以获取“借口”结果？（如果您 fetch/get 请求格式不同也没关系。这只是我尝试的最后一次尝试。但是，请 non-React/Axios。我想使用 vanilla javascript。提前致谢!

async function getApi() {
const api_url = 'https://excuser.herokuapp.com/v1/excuse'
const response = await fetch (api_url);
const data = await response.json();
const {excuse} = data;
console.log(excuse);
}

Answer 1

试试这个

async function getApi() {
  const api_url = 'https://excuser.herokuapp.com/v1/excuse'
  const response = await fetch (api_url);
  const data = await response.json();
  const {excuse} = data[0];
  console.log(excuse);
}

Answer 2

正如我在数组中看到的借口，所以你应该做 data[0] 而不是 data

async function getApi() {
const api_url = 'https://excuser.herokuapp.com/v1/excuse'
const response = await fetch (api_url);
const data = await response.json();
console.log(data)
const {excuse} = data[0];
console.log(excuse);
} 

getApi();

呈现 API 个结果

Rendering API results

javascript

api

fetch

render