在 svelte (#await) 中的 Promise 上使用异步等待不会返回在稍后的函数调用中格式化的所需数据

Question

我目前正在使用一个不返回 JSON 的 API。为了解决这个问题，我获取响应并将其推送到一个数组（同时对其进行格式化以删除任何缩进并拆分响应中的每个数字）。然后，我使用这个包含 183 个数字的数组，并对包含 183 个字符的数组运行 for 循环，以根据响应生成一个对象（具有自定义键值对）。

当我开始使用 HTML 中的数据时，事情变得令人困惑。通常你可以直接说<p>{data.overallRank}</p>，但我收到了对象未定义的错误。这是有道理的，因为 是data = {}在函数运行之前才创建的。

在寻找解决方案后，我遇到了苗条的等待块。您可以在这里阅读它们并查看教程：https ://svelte.dev/tutorial/await-blocks

在尝试实现此功能后，我有以下代码：

let playerStats = []
    let proxy = "https://cors-anywhere.herokuapp.com/"
    let url =  proxy + "https://secure.runescape.com/m=hiscore_oldschool/index_lite.ws?player=Hess"
    const data = {};
    
    let promise = getPlayer();
    async function getPlayer() {
        return await fetch(url).then((response) => response.text())
            .then((data) => {
                return data;
            });
        }

getPlayer().then((playerData) => {
// format data
  playerStats.push(playerData.replace(/\n/ig, ",").split(','));
  console.log(playerStats);

// Begin object generation
// names array shortened
let names = ["overallRank", "overallLvl", "overallXP", "attRank", ]
  
const data = {};
    for (var i = 0; i < playerStats[0].length; i++) {
        data[names[i]] = playerStats[0][i];
    }
console.log(data);
});

<main>

{#await promise}
    <p>Search for a Player...</p>
{:then data}
    <p>The data is {data}</p>
{/await}

</main>

• 我建议将此代码放入一个简洁的编辑器中，您可以在这里找到： https: //svelte.dev/tutorial/await-blocks

此代码的问题在于，它正在打印 中的数据return data，该数据返回未格式化的数据而不是对象。

我想返回在第二个函数之后创建的对象getplayer().then()...，以便我可以在整个 HTML 中使用该对象。

我希望我能很好地解释事情，并提前感谢您的帮助。

Answer 1

它返回格式化数据，因为函数返回的是格式化数据promise。为了获取格式化数据，您必须将格式化添加到链中promise

async function getPlayer() {
  return await fetch(url)
    .then((response) => response.text())
    .then((playerData) => {
       // here your transformation
       // do not forget to actually return something
       return data;
    });