Scroll down to the script below, click on any sentence (including terminal blocks!) to jump to that spot in the video!
With a Subscription, click any sentence in the script to jump to that part of the video!Login Subscribe
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!
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
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.js. Then look inside
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,
|... lines 1 - 7|
|... lines 9 - 13|
Every part of my app can now safely rely on the fact that the global
fetch() 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
this into the function, which in a browser environment, is the global
window object. 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 to ask:
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 global
Promise variable exists, copy the first one. In
|... lines 1 - 8|
|... lines 10 - 14|
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.