> JavaScript Frameworks & Tools > Symfony UX: Stimulus
Buy Access to Course
15.

Ajax with fetch(), Polyfills & async/await

Share this awesome video!

|

Keep on Learning!

Start your All-Access Pass

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

To make the Ajax request inside the controller, I'm going to use the fetch() function.

fetch() for Ajax

If you don't know, fetch() is a built-in function for making Ajax calls that most browsers support. So basically... pretty much all browsers except for IE 11.

If you do need to support IE 11, you have two options. First, the other library I really like for making Ajax requests is called Axios, which you can install with yarn add axios. We use it in our Vue tutorial. It also has a few more features than fetch.

Your second option is to "polyfill" fetch() so it works in all browsers. Github itself maintains a polyfill for fetch. It's pretty simply to set up: yarn add whatwg-fetch then, in webpack.config.js, adapt your main entry to include it first:

// webpack.config.js

Encore
    // ...
-    .addEntry('app', './assets/app.js')
+    .addEntry('app', ['whatwg-fetch', './assets/app.js'])

Using URLSearchParams() & its Polyfill

Anyways, let's make the Ajax call!

We need to send 2 query parameters on the Ajax request: the value of the search box as a q query parameter and another one called preview so that our controller knows to render the preview HTML.

To help create the query string, say const params = new URLSearchParams() and pass that an object. Inside set q to the value of the input, which we know will be event.currentTarget - to get the input Element that we attached the action to - then .value. Also pass preview set to 1.

16 lines | assets/controllers/search-preview_controller.js
// ... lines 1 - 2
export default class extends Controller {
// ... lines 4 - 7
onSearchInput(event) {
const params = new URLSearchParams({
q: event.currentTarget.value,
preview: 1,
});
// ... line 13
}
}

This URLSearchParams object is a built-in JavaScript object that helps you... basically create query strings. It is also not supported in all browsers... cough IE 11. But, it will be polyfilled automatically by Babel, as long as you have the default Encore configuration:

// webpack.config.js

Encore
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

Yea, I know, it's a little confusing. The @babel/preset-env library that Encore uses will automatically detect when you use a feature that doesn't work with the browsers that you want to support. When it detects that, it automatically adds a polyfill. This supports almost every polyfill... with fetch() being one of the few that it does not... which is why you need to add it manually.

Tip

If you want to see a list of all the polyfills added by Babel, you can add a debug flag. A report will be printed to the terminal when you build Encore:

// webpack.config.js

Encore
    .configureBabelPresetEnv((config) => {
        // ...
+        config.debug = true;
    })

Making the Ajax Request with fetch()

Ok, let's make the Ajax call: say fetch() then pass it the fancy ticks so we can create a dynamic string. We need ${this.urlValue} then a question mark and another ${} with params.toString(). That builds the query string with the & symbols.

16 lines | assets/controllers/search-preview_controller.js
// ... lines 1 - 7
onSearchInput(event) {
// ... lines 9 - 12
fetch(`${this.urlValue}?${params.toString()}`);
}
// ... lines 15 - 16

Like all Ajax libraries, fetch() returns a Promise. So if we want to get the response, we have two options. First, we can use the .then() syntax and pass a callback.

Or, we can use await... which I like because it looks simpler. Remove the .then() and instead say const response = await fetch(...).

This will wait for the Ajax call to finish and set the result to the response variable. But as soon as you use await, you must add async before whatever function that you're inside of. Yup, that makes my build happy.

18 lines | assets/controllers/search-preview_controller.js
// ... lines 1 - 7
async onSearchInput(event) {
// ... lines 9 - 12
const response = await fetch(`${this.urlValue}?${params.toString()}`);
// ... lines 14 - 15
}
// ... lines 17 - 18

The async is really just a marker that says that, thanks to the await, this function will now automatically return a Promise. That doesn't really matter unless you want to call this function directly and use its return value. If you were doing that, you would also need to await for this function to finish.

But... the response itself, isn't that interesting. What we really want is the response body. We can log that with console.log(await response.text()).

18 lines | assets/controllers/search-preview_controller.js
// ... lines 1 - 7
async onSearchInput(event) {
// ... lines 9 - 14
console.log(await response.text());
}
// ... lines 17 - 18

This shows off a... sort of weird thing about fetch(). When we make the Ajax call, we - of course - need to await for it to finish. But even getting the body of the response - with response.text() - is an asynchronous operation that returns a Promise. That's... kind of odd... but ok: we just need to await it.

Ok, testing time! Refresh and... type! Yes! I can already see new Ajax requests popping into the web debug toolbar! And the console is dumping the HTML.

The only problem is that this is the full HTML of the homepage... which isn't really what we want. What we want is a "fragment" of HTML that represents the search suggestions. Let's get that hooked up next and render it onto the page!