Example of http request

[webmstk]

Could you please provide an idiomatic or opinionated example of doing http requests in csr? You have a great book, but this part is missing :(

I tried to use reqwest, gloo-net and reqwasm but they are not working with Action::new in 0.7.4 (they require Send).
Action::new_unsync requires type annotations (help: let action: Action<(std::string::String, std::string::String), (), S> = Action::new_unsync(move |(login, password): &(String, String)|).

[gbj]

The fetch and hackernews examples in the repo both include HTTP requests.

[webmstk]

Success!

Cargo.toml

[package]
name = "action_fetch"
version = "0.1.0"
edition = "2021"

[dependencies]
leptos = { version = "0.7.4", features = ["csr"] }
console_error_panic_hook = "0.1.7"
console_log = "1.0.0"
log = "0.4.25"
serde = { version = "1.0.217", features = ["derive"] }
serde_json = "1.0.137"

gloo-net = "0.6.0"
reqwasm = "0.5.0"
reqwest = { version = "0.12.12", features = ["json"] }

src/main.rs

use leptos::prelude::*;
use serde::{Deserialize, Serialize};

fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
    leptos::mount::mount_to_body(|| view! { <App /> })
}

#[derive(Debug, Deserialize, Serialize)]
pub struct Cat {
    url: String,
}

async fn request_reqwasm(limit: usize) -> Result<Vec<Cat>> {
    let url = &format!("https://api.thecatapi.com/v1/images/search?limit={limit}");

    let cats = reqwasm::http::Request::get(url)
        .send()
        .await?
        .json::<Vec<Cat>>()
        .await?;

    Ok(cats)
}

async fn request_reqwest(limit: usize) -> Result<Vec<Cat>> {
    let url = &format!("https://api.thecatapi.com/v1/images/search?limit={limit}");
    let cats = reqwest::get(url).await?.json::<Vec<Cat>>().await?;
    Ok(cats)
}

async fn request_gloo(limit: usize) -> Result<Vec<Cat>> {
    let url = &format!("https://api.thecatapi.com/v1/images/search");
    let params = [("limit", limit.to_string())];

    let cats = gloo_net::http::Request::get(url)
        .query(params)
        .send()
        .await?
        .json()
        .await?;

    Ok(cats)
}

enum Client {
    Reqwest,
    GlooNet,
    Reqwasm,
}

#[component]
fn App() -> impl IntoView {
    let (limit, set_limit) = signal(1);

    let action = Action::new_local(move |(limit, client): &(usize, &Client)| {
        let limit = limit.to_owned();
        let client = client.to_owned();
        async move {
            let response = match client {
                Client::Reqwasm => request_reqwasm(limit).await,
                Client::Reqwest => request_reqwest(limit).await,
                Client::GlooNet => request_gloo(limit).await,
            };

            log::info!("Response: {:?}", response);
        }
    });

    view! {
        <input
            type="number"
            prop:value=limit.get().to_string()
            on:input:target=move |ev| {
                let val = ev.target().value().parse::<usize>().unwrap_or(1);
                set_limit.set(val);
            }
        />
        <input
            type="button"
            value="reqwasm"
            on:click=move |_ev| {
                action.dispatch((limit.get(), &Client::Reqwasm));
            }
        />
        <input
            type="button"
            value="reqwest"
            on:click=move |_ev| {
                action.dispatch((limit.get(), &Client::Reqwest));
            }
        />
        <input
            type="button"
            value="gloo"
            on:click=move |_ev| {
                action.dispatch((limit.get(), &Client::GlooNet));
            }
        />
    }
}