budshome (blog: 芽之家) shared the aphorism --
为何天意总让年轻人承载悲痛?我不知道。但我想年龄会加深所有的情感,包括悲痛。 -- 电影《利刃出鞘》

[WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(5)- 构建 HTTP 请求、与外部服务器通信的两种方法

💥 内容涉及著作权,均归属作者本人。若非作者注明,默认欢迎转载:请注明出处,及相关链接。

Summary: 《Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端》系列文章第五部分:在 yew 开发的 wasm 前端应用中,与外部服务器进行数据交互时,直接使用 web-sys 库,比较方便灵活,并且较易拓展,已经可以满足开发。但在 yew 中,还有更易用的封装 FetchService,FetchService 封装了 web-sys 和 stdweb 两个库。对于请求的构建、响应的结果,也都做了一致封装,使用起来更为精简。如果你的 yew 项目中,除了 web-sys 之外,也希望使用 stdweb,那么 FetchService 则更为适合。

Topics: rust graphql webassembly wasm yew

系列文章第四部分《获取 GraphQL 数据并解析 》中,我们已经与 GraphQL 服务后端进行了数据交互,获取 GraphQL 数据并解析。其中,我们直接使用的是 web-sys 库,需要获取当前的 window 对象,通过 window 对象的 Fetch API,对请求进行分发。

直接使用 web-sys 库,比较方便灵活,并且较易拓展,已经可以满足开发。但在 yew 中,还有更易用的封装 FetchServiceFetchService 封装了 web-sysstdweb 两个库。对于请求的构建、响应的结果,也都做了一致封装,使用起来更为精简。如果你的 yew 项目中,除了 web-sys 之外,也希望使用 stdweb,那么 FetchService 则更为适合。

需要注意的是:因为 stdweb 仓库很久没有更新和改进了,所以 yew 将会在下个版本 0.19 中,移除对 stdweb 的支持。stdweb 作为先行者,是一个非常优秀的库。

使用 web-sys

我们首先回忆一下前文中使用 web-sys获取 GraphQL 数据并解析的方法和过程。

构建请求

本文中,笔者使用的示例为构建一个 GraphQL 请求。相比于其它非 GraphQL 请求,如仅获取数据的 REST API,稍显复杂一些。如果你未使用或者不熟悉 GraphQL,直接忽略调 GraphQL 查询体构建部分即可,其它部分的请求构建,完全一致。

构造 GraphQL 请求的部分,主要是使用 graphql-client 库构造查询体 QueryBody<Variables>。我们已经在《使用 handlebars、rhai、graphql 开发 Rust web 前端》,以及《Rust 和 Wasm 的融合,使用 yew 构建 web 前端》中多次提及,如果有所遗忘请参阅文章。此处笔者不再赘述,直接附上代码。

#[derive(GraphQLQuery)]
#[graphql(
    ...
)]
struct AllUsers;

async fn fetch_users() -> Result<Vec<Value>, FetchError> {
    ...

    let build_query = AllUsers::build_query(all_users::Variables {
        token: token.to_string(),
    });
    let query = serde_json::json!(build_query);

    let mut req_opts = RequestInit::new();
    req_opts.method("POST");
    req_opts.body(Some(&JsValue::from_str(&query.to_string())));

    let request = Request::new_with_str_and_init(&gql_uri(), &req_opts)?;
    ...

分发请求

构建 yew 的window 对象后,通过 window 对象的 Fetch API,对请求进行分发。返回的结果类型为 JsValue,通过动态的强制转换方法 dyn_into 将其转换为 web-sysReponse 类型。

    let window = yew::utils::window();
    let resp_value =
        JsFuture::from(window.fetch_with_request(&request)).await?;
    let resp: Response = resp_value.dyn_into().unwrap();

另外,对于 Fetch API,我们还需要实现 FetchError 结构体,以及特质(trait)From<JsValue>

#[derive(Debug, Clone, PartialEq)]
pub struct FetchError {
    err: JsValue,
}

impl From<JsValue> for FetchError {
    fn from(value: JsValue) -> Self {
        Self { err: value }
    }
}

数据解析

最后,结合自己的业务逻辑,再通过一系列类型转换,如文本、数组等,使其成为我们可以渲染到页面的数据。

    let resp_text = JsFuture::from(resp.text()?).await?;

    let users_str = resp_text.as_string().unwrap();
    let users_value: Value = serde_json::from_str(&users_str).unwrap();
    let users_vec =
        users_value["data"]["allUsers"].as_array().unwrap().to_owned();

使用 yew 封装的 FetchService

yew 中的 fetch,对 stdwebweb-sys 进行了封装,我们无需指定再分别指定使用stdweb 还是 web-sys。如 yew 中的 fetch 源码片段。

//! Service to send HTTP-request to a server.

cfg_if::cfg_if! {
    if #[cfg(feature = "std_web")] {
        mod std_web;
        pub use std_web::*;
    } else if #[cfg(feature = "web_sys")] {
        mod web_sys;
        pub use self::web_sys::*;
    }
}

:yew 0.19 发布计划中,stdweb 将予以移除。

构建请求

本文中,笔者使用的示例为构建一个 GraphQL 请求。构建 GraphQL 请求查询体 QueryBody<Variables>,或者不使用其的注意点,请参阅上文《使用 web-sys -> 构建请求》部分。

yew 中,在将请求发送到服务器之前,基于 http 库重建了 Request 结构体,其请求体须实现 Into<Text> 或者 Into<Binary>

TextBinary 是下述 Result 类型的别名:

pub type Text = Result<String, Error>;
pub type Binary = Result<Vec<u8>, Error>;

GET 请求示例:

use yew::format::Nothing;
use yew_services::fetch::Request;
let get_request = Request::get("https://127.0.0.1/rest/v1/get/users")
    .body(Nothing)
    .expect("Could not build that request");

POST 请求示例:

use serde_json::json;
use yew::format::Json;
use yew_services::fetch::Request;
let post_request = Request::post("https://127.0.0.1/gql/v1/users")
    .header("Content-Type", "application/json")
    .body(Json(&json!({"isBanned": "false"})))
    .expect("Could not build that request.");

具体我们本次实现的 GraphQL 请求,实际代码相较于《使用 web-sys》部分,就很精简了。如下所示:

    ...
    // 构建 graphql 查询体
    let build_query =
        AllProjects::build_query(all_projects::Variables {});
    let query = Json(&build_query);

    // 构建请求
    let request = Request::post(&gql_uri())
        .body(query)
        .expect("Could not build request.");
    ...

发送请求

yew 中的 FetchService,提供了到浏览器的 fetch API 的绑定,请求可以通过 FetchService::fetch 或者 FetchService::fetch_with_options(附有请求选项,如 cookie)方法来发送。

FetchService::fetch 具有 2 个参数:Request 对象和 Callback回调(Callback)须实现 FormatDataType<Result<T, ::anyhow::Error>>,而非 FormatDataType<T>

也就是说,具体代码是这样的:

self.link.callback(|response: Json<anyhow::Result<Json>>|)

而不能是:

self.link.callback(|response: Json<Json>|)

结合我们的示例业务,完整代码如下:

    ....
    // 构造回调
    let callback = self.link.callback(
        |response: Response<Result<String, anyhow::Error>>| {
            let resp_body = response.into_body();
            let resp_str = resp_body.as_ref().unwrap();

            ...
        },
    );

    // 传递请求和回调
    let task = FetchService::fetch(request, callback)
        .expect("failed to start request");
    ...

数据解析

最后,结合自己的业务逻辑,再通过一系列类型转换,如文本、数组等,使其成为我们可以渲染到页面的数据。

    ...
    let projects_value: Value =
        from_str(&resp_str).unwrap();
    let projects_vec = projects_value["data"]
        ["allProjects"]
        .as_array()
        .unwrap()
        .to_owned();
    ...

本文是基于前述文章基础之上的,所以直接阅读仅能是概念上的了解。如果你希望对其践行,建议阅读系列文章。

完整代码放置在 github,若感兴趣,请下载 zzy/tide-async-graphql-mongodb

谢谢您的阅读!


Rust 生态与实践

Related Articles

  1. [Rust] Rust 官方周报 399 期(2021-07-14)
  2. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(5)- 构建 HTTP 请求、与外部服务器通信的两种方法
  3. [Rust] Rust 官方周报 398 期(2021-07-07)
  4. [Rust] Rust 官方周报 397 期(2021-06-30)
  5. [Rust] Rust 官方周报 396 期(2021-06-23)
  6. [Rust] Rust 官方周报 395 期(2021-06-16)
  7. [Rust] Rust 1.53.0 明日发布,关键新特性一瞥
  8. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(3)- rhai 脚本、静态/资源文件、环境变量等
  9. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(2)- 获取并解析 GraphQL 数据
  10. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(1)- crate 选择及环境搭建
  11. [Rust] Rust 官方周报 394 期(2021-06-09)
  12. [Rust] Rust web 前端库/框架评测,以及和 js 前端库/框架的比较
  13. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(4)- 获取 GraphQL 数据并解析
  14. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(3)- 资源文件及小重构
  15. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(2)- 组件和路由
  16. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(1)- 起步及 crate 选择
  17. [Rust] Rust 官方周报 393 期(2021-06-02)
  18. [Rust] Rust 官方周报 392 期(2021-05-26)
  19. [Rust] Rust 中,对网址进行异步快照,并添加水印效果的实践
  20. [Rust] Rust 官方周报 391 期(2021-05-19)
  21. [Rust] Rust,风雨六载,砥砺奋进
  22. [Rust] 为什么我们应当将 Rust 用于嵌入式开发?
  23. [Rust] Rust 官方周报 390 期(2021-05-12)
  24. [Rust] Rust + Android 的集成开发设计
  25. [Rust] Rust 1.52.1 已正式发布,及其新特性详述
  26. [Rust] 让我们用 Rust 重写那些伟大的软件吧
  27. [Rust] Rust 1.52.0 已正式发布,及其新特性详述
  28. [Rust] Rust 官方周报 389 期(2021-05-05)
  29. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(4) - 变更服务,以及小重构
  30. [Rust] Rust 1.52.0 稳定版预发布测试中,关键新特性一瞥
  31. [Rust] Rust 生态中,最不知名的贡献者和轶事
  32. [Rust] Rust 基金会迎来新的白金会员:Facebook
  33. [Rust] Rustup 1.24.1 已官宣发布,及其新特性详述
  34. [Rust] Rust 官方周报 388 期(2021-04-28)
  35. [Rust] Rust 官方周报 387 期(2021-04-21)
  36. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(4)- 变更服务,以及第二次重构
  37. [Rust] Rustup 1.24.0 已官宣发布,及其新特性详述
  38. [Rust] basedrop:Rust 生态中,适用于实时音频的垃圾收集器
  39. [Rust] Rust 编译器团队对成员 Aaron Hill 的祝贺
  40. [Rust] Jacob Hoffman-Andrews 加入 Rustdoc 团队
  41. [机器人] 为什么应将 Rust 引入机器人平台?以及机器人平台的 Rust 资源推荐
  42. [Rust] rust-lang.org、crates.io,以及 docs.rs 的管理,已由 Mozilla 转移到 Rust 基金会
  43. [Rust] Rust 官方周报 386 期(2021-04-14)
  44. [Rust] Rust 编译器(Compiler)团队 4 月份计划 - Rust Compiler April Steering Cycle
  45. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(3) - 重构
  46. [Rust] 头脑风暴进行中:Async Rust 的未来熠熠生辉
  47. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(2) - 查询服务
  48. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务 - 起步及 crate 选择
  49. [Rust] Rust 2021 版本特性预览,以及工作计划
  50. [Rust] Rust 用在生产环境的 42 家公司
  51. [Rust] 构建最精简的 Rust Docker 镜像
  52. [Rust] Rust 官方周报 385 期(2021-04-07)
  53. [Rust] 使用 Rust 做异步数据采集的实践
  54. [Rust] Android 支持 Rust 编程语言,以避免内存缺陷
  55. [Rust] Android 平台基础支持转向 Rust
  56. [Rust] Android 团队宣布 Android 开源项目(AOSP),已支持 Rust 语言来开发 Android 系统本身
  57. [Rust] RustyHermit——基于 Rust 实现的下一代容器 Unikernel
  58. [Rust] Rustic:完善的纯粹 Rust 技术栈实现的国际象棋引擎,多平台支持(甚至包括嵌入式设备树莓派 Raspberry Pi、Buster)
  59. [Rust] Rust 迭代器(Iterator trait )的要诀和技巧
  60. [Rust] 使用 Rust 极致提升 Python 性能:图表和绘图提升 24 倍,数据计算提升 10 倍
  61. [Rust] 【2021-04-03】Rust 核心团队人员变动
  62. [Rust] Rust web 框架现状【2021 年 1 季度】
  63. [Rust] Rust 官方周报 384 期(2021-03-31)
  64. [Rust] Rust 中的解析器组合因子(parser combinators)
  65. [生活] 毕马威(KPMG)调查报告:人工智能的实际采用,在新冠疫情(COVID-19)期间大幅提升
  66. [Python] HPy - 为 Python 扩展提供更优秀的 C API
  67. [Rust] 2021 年,学习 Rust 的网络资源推荐(2)
  68. [Rust] 2021 年,学习 Rust 的网络资源推荐
  69. [生活] 况属高风晚,山山黄叶飞——彭州葛仙山露营随笔
  70. [Rust] Rust 1.51.0 已正式发布,及其新特性详述
  71. [Rust] 为 Async Rust 构建共享的愿景文档—— Rust 社区的讲“故事”,可获奖
  72. [Rust] Rust 纪元第 382 周最佳 crate:ibig 的实践,以及和 num crate 的比较
  73. [Rust] Rust 1.51.0 稳定版本改进介绍
  74. [Rust] Rust 中将 markdown 渲染为 html
  75. [生活] 国民应用 App 的用户隐私数据窥探
  76. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(3)- 重构
  77. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(2)- 查询服务
  78. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(1)- 起步及 crate 选择
  79. [Rust] Rust 操控大疆可编程 tello 无人机

Topics

rust(79)

graphql(17)

rust-官方周报(17)

webassembly(14)

async-graphql(8)

wasm(8)

rust-官方博客(8)

tide(7)

rust-web(7)

yew(7)

this-week-in-rust(6)

mysql(5)

rbatis(5)

android(4)

actix-web(4)

mongodb(3)

json-web-token(3)

jwt(3)

cargo(3)

技术延伸(3)

rust-wasm(3)

trunk(3)

handlebars(3)

rhai(3)

用户隐私(2)

学习资料(2)

python(2)

ai(2)

人工智能(2)

postgresql(2)

rust-compiler(2)

rust-基金会(2)

rust-foundation(2)

rustup(2)

rust-toolchain(2)

rust-工具链(2)

rust-游戏开发(2)

rust-区块链(2)

graphql-client(2)

rust-game(2)

tello(1)

drone(1)

无人机(1)

隐私数据(1)

markdown(1)

html(1)

crate(1)

async(1)

异步(1)

旅游(1)

不忘生活(1)

葛仙山(1)

hpy(1)

python-扩展(1)

正则表达式(1)

解析器组合因子(1)

组合器(1)

regular-expression(1)

parser-combinator(1)

regex(1)

官方更新(1)

rust-工作招聘(1)

rust-技术资料(1)

rust-周最佳-crate(1)

rust-web-框架(1)

rust-web-framework(1)

rust-核心团队(1)

rust-core-team(1)

rust-language-team(1)

pyo3(1)

rust-python-集成(1)

python-性能改进(1)

迭代器(1)

iterator-trait(1)

国际象棋(1)

chess(1)

游戏引擎(1)

game-engine(1)

虚拟化(1)

unikernel(1)

rustyhermit(1)

linux(1)

virtualization(1)

sandboxing(1)

沙箱技术(1)

数据采集(1)

异步数据采集(1)

docker(1)

镜像(1)

生产环境(1)

rust-评价(1)

rust-2021-edition(1)

rust-2021-版本(1)

graphql-查询(1)

vision-doc(1)

愿景文档(1)

代码重构(1)

steering-cycle(1)

方向周期(1)

隐私声明(1)

机器人(1)

robotics(1)

rustdoc(1)

rust-编译器(1)

实时音频(1)

real-time-audio(1)

变更服务(1)

mutation(1)

查询服务(1)

query(1)

rust-贡献者(1)

rust-轶事(1)

rust-稳定版(1)

rust-预发布(1)

rust-测试(1)

安全编程(1)

可信计算(1)

安全代码(1)

secure-code(1)

rust-android-integrate(1)

rust-embedded(1)

rust-嵌入式(1)

rust-生产环境(1)

rust-2021(1)

rust-production(1)

网页快照(1)

网页截图(1)

水印效果(1)

图片水印(1)

yew-router(1)

css(1)

web-前端(1)

wasm-bindgen(1)

区块链(1)

blockchain(1)

surf(1)

dotenv(1)

标识符(1)

rust-1.53.0(1)

Elsewhere

- Open Source
  1. github/zzy
  2. github/sansx
- Awesome Blog
  1. Sansx's Studio
  2. 曙光磁铁的博客
- Learning & Studying
  1. Rust 学习资料 - 芽之家