在系列文章第四部分《获取 GraphQL 数据并解析 》中，我们已经与 GraphQL 服务后端进行了数据交互，获取 GraphQL 数据并解析。其中，我们直接使用的是 web-sys 库，需要获取当前的 window 对象，通过 window 对象的 Fetch API，对请求进行分发。
直接使用 web-sys 库，比较方便灵活，并且较易拓展，已经可以满足开发。但在 yew 中，还有更易用的封装 FetchService，FetchService 封装了 web-sys 和 stdweb 两个库。对于请求的构建、响应的结果，也都做了一致封装，使用起来更为精简。如果你的 yew 项目中，除了 web-sys 之外，也希望使用 stdweb，那么 FetchService 则更为适合。
需要注意的是：因为 stdweb 仓库很久没有更新和改进了，所以 yew 将会在下个版本 0.19 中，移除对 stdweb 的支持。stdweb 作为先行者，是一个非常优秀的库。
使用 web-sys
构建请求
本文中，笔者使用的示例为构建一个 GraphQL 请求。相比于其它非 GraphQL 请求，如仅获取数据的 REST
API，稍显复杂一些。如果你未使用或者不熟悉 GraphQL，直接忽略调 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-sys 的 Reponse 类型。
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，对 stdweb 和 web-sys 进行了封装，我们无需指定再分别指定使用stdweb 还是 web-sys。如 yew 中的 fetch 源码片段。
cfg_if::cfg_if! { if mod std_web; pub use std_web::*; } else if 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>。
Text 和 Binary 是下述 Result 类型的别名：
pub type Text = Result<String, Error>;pub type Binary = Result<Vec<u8>, Error>;
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");
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》部分，就很精简了。如下所示：
... 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。
谢谢您的阅读！如果要访问相关扩展链接，请阅读原文。
文章评论