개발하자

svelte에서 비동기 대기(#await)를 사용하면 나중 함수 호출에서 형식화된 원하는 데이터가 반환되지 않습니다

Cuire 2023. 8. 5. 01:08
반응형

svelte에서 비동기 대기(#await)를 사용하면 나중 함수 호출에서 형식화된 원하는 데이터가 반환되지 않습니다

나는 현재 JSON을 반환하지 않는 API로 작업하고 있다. 이 문제를 해결하기 위해, 나는 응답을 가져와 배열에 푸시한다(입력을 제거하고 응답의 각 숫자를 분할하기 위해 형식을 지정하는 동안). 그런 다음 이 183개의 숫자 배열을 사용하고 183개의 문자가 있는 배열에 대해 for 루프를 실행하여 응답에서 (사용자 지정 키 값 쌍이 있는) 개체를 생성합니다.

상황이 혼란스러워지는 것은 내가 HTML의 데이터를 사용하기 시작할 때이다. 보통 당신은 그냥 말할 수 있지만 나는 개체가 정의되지 않았다는 오류를 겪고 있다. 함수가 실행될 때까지 생성되지 않았기 때문에 이해할 수 있습니다.

해결책을 찾은 후, 나는 스벨트 대기 블록을 우연히 발견했다. 여기에서 해당 내용을 읽고 튜토리얼을 확인할 수 있습니다:

이 기능을 구현하려고 시도한 결과 다음 코드가 있습니다:

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>

  • 나는 당신이 여기서 찾을 수 있는 스블렛 편집기에 이 코드를 던지는 것을 제안한다:

이 코드의 문제는 에서 데이터를 출력하고 개체가 아닌 포맷되지 않은 데이터를 반환한다는 것입니다.

두 번째 기능 이후에 생성된 개체를 반환하여 HTML 전체에서 해당 개체를 사용할 수 있도록 합니다.

제가 잘 설명해드렸으면 좋겠고 어떤 도움이라도 미리 감사드립니다.



함수에서 반환되는 것이 반환되기 때문에 형식화된 데이터를 반환하는 것입니다. 포맷된 데이터를 얻으려면 체인에 포맷을 추가해야 합니다

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


당신은 사실 그것을 분류하는 데 매우 가까웠고, 내가 믿는 약속이 어떻게 작동하는지에 대해 약간 혼란스러웠다.

가져오기 및 디코딩 작업 후 데이터가 처리되는 블록 내에서 데이터를 포맷하기만 하면 됩니다:

  async function getPlayer() {
    return await fetch(url)
      .then((response) => response.text())
      .then((data) => {
        return formatData(data);
      });
  }

기능은 기본적으로 이미 존재하며 코드를 약간 변경하면 됩니다:

  function formatData(playerData) {
    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);
    return data;
  }

마지막으로 블록에서 사용하기로 한 약속을 명시적으로 선언할 필요가 없습니다. 약속이 반환되므로 대신 직접 사용할 수 있습니다:

<main>
{#await getPlayer()}
    <p>Search for a Player...</p>
{:then data}
    <p>Overall Rank: {data.overallRank}</p>
{/await}
</main>

작동 중인 REPL 참조


반응형