如何显示 fetch 函数的值？

Question

我正在努力提取某些数据值并将它们放入我的网站。我正在以 JSON 格式从 API 获取数据。然后由 handleResponse 函数处理。现在我希望在我的网站上显示这些接收到的值中的一个或多个。关于如何正确执行此操作的任何线索？我已经尽我所能尝试了几乎所有的事情。我也知道 {dataList} 目前不是一个使用过的变量。这只是为了说明我希望我的数据在哪里。谢谢

<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>

<title>Sollicitatie Opdracht Volcano</title>

<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>

<script defer src='/build/bundle.js'>
    import { onMount } from "svelte";
// Here we define our query as a multi-line string
// Storing it in a separate .graphql/.gql file is also possible
var query = `
query ($id: Int) { # Define which variables will be used in the query (id)
  Media (id: $id, type: ANIME) { # Insert our variables into the query arguments (id) (type: ANIME is hard-coded in the query)
    id
    title {
      romaji
      english
      native
    }
  }
}
`;

var dataList;

// Define our query variables and values that will be used in the query request
var variables = {
    id: 15125
};

// Define the config we'll need for our Api request
var url = 'https://graphql.anilist.co',
    options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            query: query,
            variables: variables
        })
    };

// Make the HTTP Api request
fetch(url, options).then(handleResponse)
                   .then(handleData)
                   .catch(handleError);

function handleResponse(response) {
    return response.json().then(function (json) {
        return response.ok ? json : Promise.reject(json);
    });
}

function handleData(data) {
    console.log(data);
}

function handleError(error) {
    alert('Error, check console');
    console.error(error);
}

</script>

<h1>API Fetching System</h1>


<main>  
    <h2>{dataList}</h2>
</main>

<svelte:head>
    <title>aniAPI Test App</title>
</svelte:head>

<style>
    main {
        background-color: lavenderblush;
        font-size: 15px;
    }
    h1 {
        font-size: 25px;
    }
</style>

要显示的数据：

Answer 1

我解决了这个问题。

通过声明一个 var dataString = '';一开始，在 HandleData 函数中，我使用 dataString = JSON.stringify(data);

对数据进行字符串化

然后在 dataList 曾经所在的下方：

{#await dataString}
{:then dataString}
<h2>{dataString}</h2>
{/await}

如何显示 fetch 函数的值？

How do I display value(s) of fetch function?

javascript

arrays

json

svelte