Blazor правильно обновляет пользовательский интерфейс после вызова API

Этот код делает именно то, что я хочу:

  1. Отображает сообщение (div) от робота, говорящее «думаю».
  2. Ожидает завершения вызова API для обновления этого сообщения (div) и переходит к сообщению (div).

Такое ощущение, что это провалит проверку кода, хотя это именно то, что мне нужно.

Есть ли какой-нибудь лучший шаблон для этого, показывающий div с «мышлением» до завершения вызова API.

private async Task SendMessage()
{   
    var messageHolder = userMessage;
    Console.WriteLine($"User Message is: {userMessage}");

    if (!string.IsNullOrWhiteSpace(messageHolder))
    {
        messages.Add(new ChatMessageInPage { User = "User", Message = messageHolder });
        var msg = new ChatMessageInPage { User = "Robot 🤖", Message = "Thinking..." };
        messages.Add(msg);
        userMessage = string.Empty;
        // THS IS THE ODD CODE
        Task.Run( async () =>
            {
                msg.Message =  await apiRobot.GetBotResponse(messageHolder);
          
                InvokeAsync(() =>
                {
                    NeedScrollBottom = true;
                    StateHasChanged();
                });
            }
        );
        NeedScrollBottom = true;
        StateHasChanged();
    }
}
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обычно это должно делать то же самое более простым и надежным способом:

if (!string.IsNullOrWhiteSpace(messageHolder))
{
    messages.Add(new ChatMessageInPage { User = "User", Message = messageHolder });
    var msg = new ChatMessageInPage { User = "Robot 🤖", Message = "Thinking..." };
    messages.Add(msg);
    userMessage = string.Empty;

    // Simple code - display previous during await
    NeedScrollBottom = true;
    await Task.Delay(1);  // recommended, for when the apiRobot isn't async enough            
    msg.Message =  await apiRobot.GetBotResponse(messageHolder);      
    NeedScrollBottom = true;
}

если это не работает так, как ожидалось, опубликуйте точные результаты.

Ух ты! Удивительное выполнение await Task.Delay(1) решило проблемы с просмотром. Когда его нет, он не обновляет пользовательский интерфейс, поэтому я бы назвал это обязательным. Спасибо, Хенк!

Carter 11.07.2024 21:09

Это не всегда требуется — это зависит от реализации GetBotResponse(). Хотя я бы назвал это рекомендуемым.

Henk Holterman 12.07.2024 06:44

Например, если бы существовал метод, у которого не было доступного асинхронного вызова, который мог бы привести к недостаточности асинхронности?

Carter 17.07.2024 15:07

Да, ваш путь к коду должен на мгновение отказаться от потока. Это не то, что вы обычно можете знать или требовать от Сервиса.

Henk Holterman 17.07.2024 23:16

Другие вопросы по теме