Dioxus 中的数据获取

获取数据

我们的 HotDog 应用程序具有一些基本的交互性，但还不能获取新的狗图像。在本章中，我们将使用异步从 API 接口获取数据。

添加依赖关系

Dioxus 没有提供任何用于获取数据的内置实用程序。但在本教程中，我们将从头开始实现数据获取。

首先，我们需要为应用程序添加两个新的依赖项：serde 和 reqwest。

• Reqwest 提供了一个用于获取数据的 HTTP 客户端。
• Serde 会让我们派生一个 JSON 反序列化器来解码响应。

在新的终端窗口中，使用 cargo add 将这些 crate 添加到应用程序中。

cargo add reqwest --features json
cargo add serde --features derive

定义响应类型

我们将使用神奇的 dog.ceo/dog-api 为 HotDog 抓取狗的图片。幸运的是，API 响应的反序列化非常简单。

让我们创建一个符合 API 格式的新 Rust 结构，并为其派生 Deserialize。

Dog API 文档概述了一个示例 API 响应：

{
    "message": "https://images.dog.ceo/breeds/leonberg/n02111129_974.jpg",
    "status": "success"
}

我们的 Rust 结构需要与这种格式相匹配，不过现在我们只包括 message 字段。

#[derive(serde::Deserialize)]
struct DogApi {
    message: String,
}

使用 reqwest 和 async

Dioxus 支持异步 Rust。我们只需将 onclick 处理程序转换为异步，然后在异步完成后设置 img_src。

对代码的修改非常简单--只需添加 reqwest::get 调用，然后在 img_src 上调用 .set()设置结果。

#[component]
fn DogView() -> Element {
    let mut img_src = use_signal(|| "".to_string());

    let fetch_new = move |_| async move {
        let response = reqwest::get("https://dog.ceo/api/breeds/image/random")
            .await
            .unwrap()
            .json::()
            .await
            .unwrap();

        img_src.set(response.message);
    };

    // ..

    rsx! {
        div { id: "dogview",
            img { src: "{img_src}" }
        }
        div { id: "buttons",
            // ..
            button { onclick: fetch_new, id: "sa ve", "sa ve!" }
        }
    }
}

Dioxus 会 自动在异步闭包上调用 spawn。您也可以使用 spawn 执行异步工作，而无需异步闭包，只需在任何异步块上调用 spawn() 即可。

rsx! {
    button {
        onclick: move |_| {
            spawn(async move {
                // do some async work...
            });
        }
    }
}

传递给 spawn 的 future 不得包含对异步块外数据的潜在引用。复制的数据可以被异步块捕获，但所有其他数据都必须 move，通常是通过调用 .clone()。

使用 use_resource 管理数据抓取

说到底，直接使用裸异步调用，往往很容易埋下竞赛条件和各种奇怪的状态错误。比如，用户如果连续快速点击获取按钮，就可能同时发出两个并行请求。要是这些请求还在更新别处的数据，先返回的那个“错误请求”反而可能抢先完成，最终把状态带偏，这就是典型的竞赛条件。

在 Dioxus 里，资源本身就属于状态的一环，它的取值取决于相关异步任务什么时候完成。借助use_resource这个钩子，可以很方便地对资源对象的异步状态进行管理，比如启动、停止、暂停以及修改。

让我们将组件改为使用 use_resource：

#[component]
fn DogView() -> Element {
    let mut img_src = use_resource(|| async move {
        reqwest::get("https://dog.ceo/api/breeds/image/random")
            .await
            .unwrap()
            .json::()
            .await
            .unwrap()
            .message
    });

    rsx! {
        div { id: "dogview",
            img { src: img_src.cloned().unwrap_or_default() }
        }
        div { id: "buttons",
            button { onclick: move |_| img_src.restart(), id: "skip", "skip" }
            button { onclick: move |_| img_src.restart(), id: "sa ve", "sa ve!" }
        }
    }
}

资源非常强大：可与 Suspense、Streaming HTML、反应性等集成。

资源应用程序接口的细节现在还不是很重要，但您将在大型应用程序中频繁使用资源，因此最好阅读一下文档。