cross-fetch playground

by lquixada

HTML

<!-- Forces custom fetch usage -->
<script>delete window.fetch</script>
<script src="https://unpkg.com/cross-fetch/dist/cross-fetch.js"></script>

<h3>cross-fetch playground</h3>

<p>
This playground is only useful if you're accessing this page with a browser with no native fetch support. If that's the case, play with different settings like wrong urls, cross-domain and text requests. Check out the <a href="https://github.github.io/fetch/" target="_blank">Github's fetch</a> api page for more options.
</p>

<p>
  Is the fetch polyfill being used right now?
  <strong>
  <script>
  	document.write(fetch.polyfill? 'Yes.':'No.');
  </script>
  </strong>
</p>

<span>response</span>
<pre id="content">
  loading..
</pre>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

span {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  font-size: 12px;
  background-color: #5389d6;
  border-radius: 4px 4px 0 0;
}

pre {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  background-color: #c7deff;
  border: 2px solid #5389d6;
  border-radius: 0 3px 3px 3px;
  overflow-x: scroll;
}

JavaScript

var content = document.getElementById('content');

fetch('//api.github.com/users/lquixada')
  .then(function (res) {
    if (res.status >= 400) {
      throw new Error("Bad response from server");
    }
    return res.json();
  })
  .then(function (user) {
    content.innerHTML = JSON.stringify(user, null, ' ');
  })
  .catch(function (err) {
    content.innerHTML = err.message;
  });