Перейти к содержимому:

• О блоке #await в svelte
• Запустить (запустить) функцию, когда блок #await разрешается или отклоняется
• Исправить неопределенный или любой возвращенный текст, отображаемый в браузере.
  • 1. Метод 1 (возврат пустых строк):
  • 2. Метод 2 (Скройте возвращаемый текст из функции в пользовательском интерфейсе с помощью CSS.)
    • PS: Хотите нанять разработчика SvelteKit? Свяжитесь со мной

О блоке #await в svelte

Блок #await в svelte очень удобен для обработки асинхронных данных:

{#await data.myPromise}



{:then results}

{#each results as result}

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

По сути, именно так работает блок #await в svelte. Он отображает различное содержимое в зависимости от состояния обещания: индикатор загрузки при ожидании, результаты при разрешении и сообщение об ошибке в случае отклонения.

Но допустим, я хочу, чтобы определенная функция запускалась, когда обещание было выполнено или отклонено (например, тост).

Запустите (запустите) функцию, когда блок #await разрешается или отклоняется.

Вот как вы можете запускать определенные функции, когда обещание разрешается или отклоняется:

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

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

Теперь наша функция будет запускаться всякий раз, когда будет достигнут блок кода.

• showSuccess вызывается, когда обещание разрешается, с количеством результатов в качестве аргумента.
• showError срабатывает, если обещание отклоняется, и отображается специальное сообщение об ошибке.

И еще кое-что...

Исправить неопределенный или любой возвращенный текст, отображаемый в браузере.

Когда эти функции выполняются, любой возвращаемый текст будет отображаться в браузере, потому что это своего рода обходной путь. Синтаксис, который мы использовали, обычно предназначен для отображения возвращаемых строк/числа в браузере. Даже возврат ничего не вернет неопределенное значение по умолчанию. И эта строка (которая обычно не имеет смысла) будет отображаться конечному пользователю. Что-то вроде этого:

Не имеет смысла для конечного пользователя ?‍♂️?‍♀️

Поэтому обязательно возвращайте пустые строки или оберните функцию в скрытый блок:

1. Метод 1 (возврат пустых строк):

В этом методе мы обязательно вернем пустые строки из наших функций.

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

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

Это обеспечит возврат пустых строк.

--- Или ---

2. Метод 2 (Скройте возвращаемый текст из функции в пользовательском интерфейсе с помощью CSS.)

В этом методе вместо этого мы скроем функциональный блок в пользовательском интерфейсе, поэтому возвращаемый текст будет скрыт от глаз пользователя.

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}