テキストボックス入力時に API をgloo-netで叩くには

from B Hello, Client

テキストボックス入力時にAPIをgloo-netで叩くには

そのためには

テキストボックスを追加

input textかな

テキストボックスの入力が終わった時に、APIを叩く。

どうやってYewで...

イベントドリブンの処理を作るの？

Ajaxを走らせるの？

APIを指定されたパラメータで叩く

テキストボックスの中身を空白区切りで出力する。

Yewのexamplesを参照にする。

https://github.com/yewstack/yew/blob/master/examples/password_strength/src/text_input.rs

on_inputに受け取ったinput_event: InputEventからどうやってテキストボックスの値を取るんすか？

JavaScriptではこう

code:js

input_event.target.value

c.f. https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event

code:rs

let value = input_event

.target().unwrap_throw()

.value_of()

.as_string().unwrap_throw();

こうかな？

まあ、確かに...。

unwrapで如何に型の綱渡りしているかが可視化されている...。

注意（追記）

これでは動かない

テキストボックス入力時に API をgloo-netで叩くには#661bf877d3fe61000002e6b9

gloo-netを使う

Yew tutorial

code:rs

Request::get("../api/search")

.query(("tag", value))

.send()

.await

Requestで送信データを作って

sendで送る

awaitってなんだろ？

Asynchronous Programming in Rust

まんまJavaScriptのAwaitと一緒。

awaitが取るのはFutureトレイトを実装するオブジェクト

jsonメソッドがFutureトレイト返してるのは何でだろう...？

でかいデータだと処理にめちゃくちゃ時間がかかるからとかかね

wasm-bindgen-futures For executing Rust Future as a Promise

なるほど、wasm-bindgen-futuresでFutureをPromiseに置き換えられるのか

Futureをasyncで対処したいけど、それをon_change関数でやるわけにもいかないし...と思ったら、wasm_bindgen_futures::spawn_localを使えばいいことがわかった。

code:rs

wasm_bindgen_futures::spawn_local(async move {

send_api_request(&value).await.unwrap_throw();

});

このmoveを取る方法は....なさそう。

moveは必要

asyncのせいで実行タイミングが実行元の関数とズレるから

async関数が実装された時には実行元の関数のライフタイムが終わっているかも？

まあ今回の方法であれば特段問題にはならないけど。

ぐわーだめだ、InputEventからEventTargetを取れたまではいいけど、EventTargetからvalueを取る方法がない

"value"を取る方法があれば...。

code:log

kssrs_client-bf23bfc7550f002f.js:749 Uncaught Error: unwrap_throw failed (client/src/main.rs:20:26)

at imports.wbg.__wbindgen_throw (kssrs_client-bf23bfc7550f002f.js:749:15)

at wasm_bindgen::throw

それにしてもRustのエラーがJavaScriptのエラーとしてちゃんと出てるのすごいな

対応がうまく設定されてるんだろうな

input_event.target().unwrap_throw().value_of()で正確には何が返ってきてるのかが知りたい

InputEventからvalueを取り出してくる方法、exampleに普通にあった

code:rs

fn get_value_from_input_event(e: InputEvent) -> String {

let event: Event = e.dyn_into().unwrap_throw();

let event_target = event.target().unwrap_throw();

let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();

web_sys::console::log_1(&target.value().into());

target.value()

}

dyn_intoが鍵のようだ。（JavaScriptの動的変換を実装した関数）

use wasm_bindgen::JsCast;をする必要がある。

この関数を使って、InputEventからテキストの値を抽出してやれば....いけた！

B2-3まで達成できた！

code:log

GET /api/search?query=aaaa:

> Matched: (search) GET /api/search?<query>

aaaa

> Outcome: Success(200 OK)

> Response succeeded.

https://gyazo.com/49cfd97f0ead91ce3ad72c460509bcff