Pular para o conteúdo:

• Sobre o bloco #await em svelte
• Execute (acione) uma função quando o bloco #await for resolvido ou rejeitado
• Corrigir texto indefinido ou qualquer texto retornado que aparece no navegador
  • 1. Método 1 (retornar strings vazias):
  • 2. Método 2 (ocultar o texto retornado da função na IU com CSS.)
    • PS: Precisa empregar um SvelteKit Dev? Entre em contato comigo

Sobre o bloco #await no svelte

O bloco #await no svelte é muito útil para lidar com dados assíncronos:

{#await data.myPromise}



{:then results}

{#each results as result}

{error?.message ?? "Something went wrong"}

É basicamente assim que o bloco #await funciona no svelte. Ele exibe conteúdos diferentes com base no estado de uma promessa: um indicador de carregamento enquanto pendente, resultados quando resolvido e uma mensagem de erro se rejeitada.

Mas digamos que eu queira que uma determinada função seja executada quando a promessa for resolvida ou rejeitada (como um brinde).

Execute (acione) uma função quando o bloco #await for resolvido ou rejeitado

Veja como você pode executar funções específicas quando a promessa é resolvida ou rejeitada:

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

{error?.message ?? "Something went wrong"}

Agora, nossa função será executada sempre que o bloco de código for alcançado.

• showSuccess é chamado quando a promessa é resolvida, com o número de resultados como argumento.
• showError é acionado se a promessa for rejeitada, exibindo uma mensagem de erro personalizada.

Mais uma coisa...

Corrigir texto indefinido ou qualquer texto retornado que aparece no navegador

Quando essas funções são executadas, qualquer texto retornado aparecerá no navegador, porque é uma espécie de solução alternativa. A sintaxe que usamos geralmente serve para mostrar strings/números retornados no navegador. Mesmo não retornar nada retornará o padrão indefinido. E essa string (que normalmente não faz sentido), será exibida para o usuário final. Algo assim:

Não faz sentido para o usuário final ?‍♂️?‍♀️

Portanto, certifique-se de retornar strings vazias ou agrupar a função em um bloco oculto:

1. Método 1 (Retornar strings vazias):

Neste método, garantiremos o retorno de strings vazias de nossas funções.

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

{error?.message ?? "Something went wrong"}

Isso garantirá que strings vazias sejam retornadas.

--- Ou ---

2. Método 2 (ocultar o texto retornado da função na IU com CSS.)

Neste método, ocultaremos o bloco de função na IU, para que o texto retornado fique oculto da vista do usuário.

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}