title: JS - Getting either text or JSON with Fetch API
body: <p>I am moving over from jQuery AJAX requests to the new Fetch API (nothing against jQuery, I still have it in my site, but Fetch looks - according to <a href="https://jakearchibald.com/2015/thats-so-fetch/" rel="nofollow">Jake Archibald</a> and <a href="https://davidwalsh.name/fetch" rel="nofollow">David Walsh</a> and also IMHO - to be the new way of sending async requests).</p>
  
  <p>As such, with jQuery, I had the following function (more or less):</p>
  
  <pre><code>function ajaxCall(type, url, data) {
    return $.ajax({
      type: type,
      url: url,
      data: data,
    })
    .fail(function(xhr, status, errorThrown) {
      // Do fail stuff
    })
    .always(function(xhr, status) {
      // Do always stuff
    });
  }
  
  // Later...
  var myAjax = ajaxCall(myType, myUrl, myData);
  myAjax.done(function(xhr) {
   // Do done stuff
  });
  </code></pre>
  
  <p>This way, I could have one function be called to handle <em>any</em> and <em>all</em> ajax requests I could ever need (for the most part at least...). Note that I do not declare a <code>dataType</code>, as I use jQuery's <a href="http://api.jquery.com/jquery.ajax/" rel="nofollow">intelligent guess</a>. This way my server can send me whatever response and I could handle it (probably a smarter way to do this would be to pass another parameter with the data type - in the case the "intelligent guess" goes wrong, but this was the way I set it up).</p>
  
  <p>I am now trying to recreate the above with the new Fetch API. What I have so far currently looks like this:</p>
  
  <pre><code>function fetchCall(url, method, body) {
    // This if statement is supposed to handle
    // query selectors (which in GET requests go in the url)
    // on GET requests - as opposed to POST req's which go in the body
    if (method === 'GET') {
       var data = body;
       url = new URL(url, location.protocol + '//' + location.host + '/');
       Object.keys(data).forEach(key =&gt; url.searchParams.append(key, data[key]));
       body = undefined;
    }
    return fetch(url, {
      method: method,
      body: body
    }).then(function(res) {
      if (res.ok) return res;
      throw new Error('Server error. Status code: ', res.status);
    }).catch(function(err) {
      console.log(err);
    });
  }
  
  // Later...
  var myFetch = fetchCall(myUrl, myMethod, myBody);
  myFetch.then(function(res) {
    console.log(res);
  });
  </code></pre>
  
  <p>The problem I am running into is that <code>if res.ok return res;</code> does not state what type of response it is (i.e. <code>res.json()</code>, <code>res.blob()</code>, <code>res.text()</code>, etc.).</p>
  
  <blockquote>
    <p>Thus, I am wondering how to set up a dynamic way of setting the type of response body. Is this even possible at the Fetch API's current state of development? Is it just that there is something I am not duplicating in <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="nofollow">MDN</a>?</p>
  </blockquote>
  
  <p><strong>After messing around with this, I also realized I could make it always set to <code>return res.text();</code> and the if the call is supposed to be JSON, use <code>JSON.parse(response);</code>, but I do want it to be dynamic. What if I end up wanting to return a <code>blob()</code>?</strong></p>