Initial example for the Fetch API

2025-04-25 06:02:13 +00:00 · 2018-08-18 17:20:42 -04:00 · 2018-08-18 17:20:42 -04:00 · 9d7c0af08f
commit 9d7c0af08f
parent 9c6225fd80
10 changed files with 158 additions and 0 deletions
--- a/Cargo.toml
+++ b/Cargo.toml
@ -56,6 +56,7 @@ members = [
  "examples/comments",
  "examples/console_log",
  "examples/dom",
+  "examples/fetch",
  "examples/guide-supported-types-examples",
  "examples/hello_world",
  "examples/import_js",
--- a/examples/fetch/.gitignore
+++ b/examples/fetch/.gitignore
@ -0,0 +1,4 @@
+fetch.d.ts
+fetch.js
+fetch_bg.wasm
+package-lock.json
--- a/examples/fetch/Cargo.toml
+++ b/examples/fetch/Cargo.toml
@ -0,0 +1,16 @@
+[package]
+name = "fetch"
+version = "0.1.0"
+authors = ["Andrew Chin <achin@eminence32.net>"]
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+futures = "0.1.20"
+wasm-bindgen = { path = "../..", features = ["serde-serialize"]  }
+js-sys = { path = "../../crates/js-sys" }
+web-sys = { path = "../../crates/web-sys" }
+wasm-bindgen-futures = { path = "../../crates/futures" }
+serde = "^1.0.59"
+serde_derive = "^1.0.59"
--- a/examples/fetch/build.bat
+++ b/examples/fetch/build.bat
@ -0,0 +1,2 @@
+cargo +nightly build --target wasm32-unknown-unknown
+cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml --bin wasm-bindgen -- ../../target/wasm32-unknown-unknown/debug/fetch.wasm --out-dir .
--- a/examples/fetch/build.sh
+++ b/examples/fetch/build.sh
@ -0,0 +1,10 @@
+#!/bin/sh
+
+# For more coments about what's going on here, see the `hello_world` example
+
+set -ex
+
+cargo +nightly build --target wasm32-unknown-unknown
+cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \
+  --bin wasm-bindgen -- \
+  ../../target/wasm32-unknown-unknown/debug/fetch.wasm --out-dir .
--- a/examples/fetch/index.html
+++ b/examples/fetch/index.html
@ -0,0 +1,10 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+  </head>
+  <body>
+    <script src='./index.js'></script>
+
+
+  </body>
+</html>
--- a/examples/fetch/index.js
+++ b/examples/fetch/index.js
@ -0,0 +1,11 @@
+const rust = import('./fetch');
+
+
+rust.then(m => {
+    m.run().then((data) => {
+        console.log(data);
+
+        console.log("The latest commit to the wasm-bindgen %s branch is:", data.name);
+        console.log("%s, authored by %s <%s>", data.commit.sha, data.commit.commit.author.name, data.commit.commit.author.email);
+    })
+});
--- a/examples/fetch/package.json
+++ b/examples/fetch/package.json
@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "serve": "webpack-serve ./webpack.config.js"
+  },
+  "devDependencies": {
+    "webpack": "^4.16.5",
+    "webpack-serve": "^2.0.2"
+  }
+}
--- a/examples/fetch/src/lib.rs
+++ b/examples/fetch/src/lib.rs
@ -0,0 +1,85 @@
+#![feature(use_extern_macros)]
+
+extern crate wasm_bindgen;
+extern crate js_sys;
+extern crate web_sys;
+extern crate wasm_bindgen_futures;
+extern crate futures;
+#[macro_use]
+extern crate serde_derive;
+
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+use js_sys::Promise;
+use web_sys::{Request, RequestInit, RequestMode, Response, Window};
+use wasm_bindgen_futures::JsFuture;
+use futures::{future, Future};
+use wasm_bindgen_futures::future_to_promise;
+
+// A struct to hold some data from the github Branch API.
+// Note how we don't have to define every member -- serde will ignore extra data when deserializing
+#[derive(Debug, Serialize, Deserialize)]
+pub struct Branch {
+    pub name: String,
+    pub commit: Commit,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct Commit {
+    pub sha: String,
+    pub commit: CommitDetails,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct CommitDetails {
+    pub author: Signature,
+    pub committer: Signature,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct Signature {
+    pub name: String,
+    pub email: String,
+}
+
+#[wasm_bindgen]
+extern "C" {
+    static window: Window;
+}
+
+#[wasm_bindgen]
+pub fn run() -> Promise {
+    let mut request_options = RequestInit::new();
+    request_options.method("GET");
+    request_options.mode(RequestMode::Cors);
+
+    let req = Request::new_using_usv_str_and_request_init("https://api.github.com/repos/rustwasm/wasm-bindgen/branches/master", &request_options).unwrap();
+
+    // the RequestInit struct will eventually support setting headers, but that's missing right now
+    req.headers().set("Accept", "application/vnd.github.v3+json").unwrap();
+
+    let req_promise = window.fetch_using_request(&req);
+
+    let to_return = JsFuture::from(req_promise).and_then(|resp_value| {
+        // resp_value is a Response object
+        assert!(resp_value.is_instance_of::<Response>());
+        let resp: Response = resp_value.dyn_into().unwrap();
+
+        resp.json()
+
+
+    }).and_then(|json_value: Promise| {
+        // convert this other promise into a rust Future
+        JsFuture::from(json_value)
+    }).and_then(|json| {
+        // Use serde to parse this into a struct
+        let branch_info: Branch = json.into_serde().unwrap();
+
+        // Send the Branch struct back to javascript as an object
+        future::ok(JsValue::from_serde(&branch_info).unwrap())
+    });
+
+    // Convert this rust future back into a javascript promise.
+    // Return it to javascript so that it can be driven to completion.
+    future_to_promise(to_return)
+}
--- a/examples/fetch/webpack.config.js
+++ b/examples/fetch/webpack.config.js
@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+    entry: './index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'index.js',
+    },
+    mode: 'development'
+};