UseFuture

use_future permite executar um encerramento assíncrono e fornece seu resultado.

Por exemplo, podemos fazer uma solicitação de API dentro de use_future:

#![allow(unused)]
fn main() {
let future = use_future(cx, (), |_| async move {
    reqwest::get("https://dog.ceo/api/breeds/image/random")
        .await
        .unwrap()
        .json::<ApiResponse>()
        .await
});
}

O código dentro de use_future será enviado ao agendador do Dioxus assim que o componente for renderizado.

Podemos usar .value() para obter o resultado do Future. Na primeira execução, como não há dados prontos quando o componente é carregado, seu valor será None. No entanto, uma vez finalizado o Future, o componente será renderizado novamente e o valor agora será Some(...), contendo o valor de retorno do encerramento.

Podemos então renderizar esse resultado:

#![allow(unused)]
fn main() {
cx.render(match future.value() {
    Some(Ok(response)) => rsx! {
        button {
            onclick: move |_| future.restart(),
            "Click to fetch another doggo"
        }
        div {
            img {
                max_width: "500px",
                max_height: "500px",
                src: "{response.image_url}",
            }
        }
    },
    Some(Err(_)) => rsx! { div { "Loading dogs failed" } },
    None => rsx! { div { "Loading dogs..." } },
})
}

Reiniciando o Future

O identificador UseFuture fornece um método restart. Ele pode ser usado para executar o Future novamente, produzindo um novo valor.

Dependências

Muitas vezes, você precisará executar o Future novamente toda vez que algum valor (por exemplo, uma prop) mudar. Ao invés de .restart manualmente, você pode fornecer uma tupla de "dependências" para o gancho. Ele executará automaticamente o Future quando qualquer uma dessas dependências for alterada. Exemplo:

#![allow(unused)]
fn main() {
let future = use_future(cx, (breed,), |(breed,)| async move {
    reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
        .await
        .unwrap()
        .json::<ApiResponse>()
        .await
});
}