Fix Fetch requests using FormData not sending the actual data to the …

…server.

Fixes #64

When running the requests using the original fetch implementation, we passed in XhookFormData instead of the native FormData object, causing the request to be sent with [Object object] instead of the real data.

dist/xhook.js

@@ -592,6 +592,9 @@ if (typeof WINDOW[FETCH] === "function") {
     return new Promise(function(resolve, reject) {
       var done, getRequest, processAfter, processBefore, send;
       getRequest = function() {
+        if (options.body instanceof XHookFormData) {
+          options.body = options.body.fd;
+        }
         if (options.headers) {
           options.headers = new Headers(options.headers);
         }
@@ -669,4 +672,4 @@ if (typeof define === "function" && define.amd) {
   (this.exports || this).xhook = xhook;
 }
 
-}.call(this));
+}.call(this));

example/fetch-form-data.html

@@ -0,0 +1,35 @@
+<h5>Fetch with form data</h5>
+
+<form>
+  <input type="text" id="username" name="username">
+  <input type="password" id="password" name="password">
+  <button id="submit" type="button">submit</button>
+</form>
+
+<pre id="result"></pre>
+
+<script src="https://cdn.jsdelivr.net/fetch/2.0.1/fetch.min.js"></script>
+<script src="../dist/xhook.js"></script>
+<script type="text/javascript">
+  xhook.after(function (request, response) {
+    console.log(request, response);
+  });
+
+  document.getElementById("submit").addEventListener("click", function () {
+    var username = document.getElementById("username").value;
+    var password = document.getElementById("password").value;
+    const data = new FormData();
+    data.append('username', username);
+    data.append('password', password);
+    console.log("submitting data,", data);
+    fetch(`http://echo.jpillora.com/cors-test`, {
+      method: 'POST',
+      credentials: 'same-origin',
+      body: data
+    }).then((response) => {
+      response.text().then((text) => {
+        document.querySelector('#result').innerHTML = text;
+      })
+    })
+  });
+</script>

index.html

@@ -59,6 +59,7 @@
       <select>
         <option value="vanilla">With Vanilla</option>
         <option value="vanilla-fetch">With Fetch</option>
+        <option value="fetch-form-data">With Fetch & FormData</option>
         <option value="vanilla-both">Vanilla With Fetch</option>
         <option value="xhr-webworker">With WebWorker</option>
         <option value="fetch-webworker">With Fetch in WebWorker</option>