Scroll down to the script below, click on any sentence (including terminal blocks!) to jump to that spot in the video!Cool, got it! Show me the script!
This Chapter isn't quite ready yet
Rest assured, the gnomes are hard at work on completing this video
fetch() function is built into all modern browsers... which is cool because
we didn't need to install any outside libraries to make AJAX requests. Yay! Except...
what about older browsers? I'm looking at you IE! Google for "caniuse fetch".
The good news is that
fetch() is almost universal... ahem, IE 11. So... you
might be ok to do nothing! But, for the rest of us that do have a few users on
IE, yea, using
fetch() will be a problem. But, a problem we can fix!
Babel transpiles - basically rewrites - that code into old, boring syntax that
all browsers support. So, that's already handled. But, when there is a totally
new feature, like
fetch(), Babel doesn't handle that. Instead, you need a
polyfill: a fancy word for a library that adds a feature if it's missing.
Google for "fetch polyfill" to find a library from GitHub. Scroll down to find
the library name:
whatwg-fetch. Copy that, find your open terminal and:
yarn add whatwg-fetch --dev
it will figure out whether or not the current browser has the feature, like
fetch() function. If it does not, it will add it.
Super easy! To make sure
fetch() is available everywhere, we can import it from
our entry file:
rep_log_react.js. Then, it will definitely be available in
rep_log_api.js. But... I like to get even crazier! Open
layout is configured as my "shared" entry...
which is a fancy way of saying that
layout.js is included on every page and
so its code will always run. Inside that file,
Every part of my app can now safely rely on the fact that the global
function will be available.
Oh, and because I love digging in to see how things work, let's go check out the
polyfill code! Open
node_modules, search for
whatwg, expand its directory and open
fetch.js. This is the file we just imported.
Look all the way at the bottom: it's a self-executing function. It passes
into the function, which in a browser environment, is the global
Then, on top, that
window object is passed as a
self. And because all global
variables & functions are actually properties on the
window object, it's able
Hey! Does the window variable have the global
fetch()function on it?
If it does, it just returns. If it does not, the rest of this code works to define
and add it. There it is:
self.fetch =. This is a polyfill in action - kinda cool.
Go back to the
fetch polyfill docs. Ah, it says that we also need to use a
Promise polyfill for older browsers. We can literally see this inside of the
fetch polyfill: it assumes that a
Promise class is available.
Let's polyfill it to be safe: click into the library they recommend. Cool: copy the name, move over, and:
yarn add promise-polyfill --dev
When it finishes, head back to the docs. Interesting: this shows two different
import options. You can use the second one to import a
Promise object, but
without adding a new global variable. Because we do want to guarantee that a
Promise variable exists, copy the first one. In
To make sure we didn't break anything, go back to the tab that's running encore and restart it:
yarn run encore dev-server
Perfect! We now support older browsers... ahem, IE.