2

I'd like to make use of async/await with fetch in response to my user selecting something from an HTML <select> dropdown. To do this, I'm adding an async event handler to the change event of the select element:

import createDebug from 'debug';
const { onLoad } = require('./util');
const debug = createDebug('data_sources');

onLoad(() => {
  const createParserArgsInputs = async (ev) => {
    debug('hi');
    const $target = $(ev.target);
    const id = $target.val();
    debug($target, id);
    const response = await fetch(`/source-types/${id}/details`);
    const details = await response.json();
    debug(details.parser_args);
  };

  $('#data_source_source_type_id').on('change', createParserArgsInputs);
});

onLoad is equivalent to $(document).ready; all of this is preprocessed by Babel before being sent to the browser.

However, when I select something from the dropdown, I get nothing. No logs; no error messages. The network request, however, is fired, and comes back with the expected JSON response - but none of the three logs are logged.

What am I missing? Changing this to a synchronous handler and commenting out the awaits makes the logs appear; is it illegal to have an async function as an event handler?

ArtOfCode
  • 5,702
  • 5
  • 37
  • 56
  • jQuery is not going to do anything with the Promise that your function returns to it. – Pointy Jan 10 '18 at 19:47
  • @Pointy Huh? I'm not returning anything at all, let alone to jQuery. – ArtOfCode Jan 10 '18 at 19:48
  • No it isnt. Maybe transpiling goes wrong? – Jonas Wilms Jan 10 '18 at 19:48
  • Yes you are. That's what an `async` function means: you're returning a promise with the first `await`. – Pointy Jan 10 '18 at 19:49
  • 1
    Also I'm not sure the second `await` makes sense; that doesn't seem like it'd be an async function (`response.json()`). – Pointy Jan 10 '18 at 19:50
  • @Pointy .json _is_ async, for some reason. Anyway. I see what you mean about returning a promise, but I don't see where I'm giving it to jQuery. – ArtOfCode Jan 10 '18 at 19:51
  • @pointy while you are right, your comments are a bit missleading... – Jonas Wilms Jan 10 '18 at 19:53
  • You're passing that `async` function to jQuery as the event handler. The library will call it when the event happens, but it's not expecting a Promise to come back. The jQuery event handler protocol predates the whole Promise thing by some years. – Pointy Jan 10 '18 at 19:53
  • @JonasW. ?? How? An `async` function returns a Promise, right? – Pointy Jan 10 '18 at 19:53
  • 1
    @Pointy sure, but that shouldn't affect it, unless I'm mistaken. The side-effects of the handler should happen anyway, regardless of what's been returned. – ArtOfCode Jan 10 '18 at 19:54
  • @ArtOfCode hmmm ... now I see what you mean; let me try a test. (I just got back from a long walk so my brain may be out of sugar.) – Pointy Jan 10 '18 at 19:55
  • What is that `debug()` thing? This is running in a browser right? Does that do something more/different from `console` APIs? – Pointy Jan 10 '18 at 19:56
  • @Pointy it's from NPM's `debug` module. This _is_ browser code, but with node module integration via yarn & transpilation by Babel. – ArtOfCode Jan 10 '18 at 19:58
  • Ah OK. Thanks. Typing in a test now. – Pointy Jan 10 '18 at 19:59
  • 2
    Bah, got it. TL;DR: I'm dumb. Thanks for rubberducking, @Pointy - replacing with `console.log` worked, which made me realise that I hadn't enabled the debug messages -_- – ArtOfCode Jan 10 '18 at 20:01
  • 1
    There are times when I am in fact no more useful than a plastic toy :) – Pointy Jan 10 '18 at 20:02
  • I'm voting to close this question as off-topic because the problem is solved and is not part of the questions code – Jonas Wilms Jan 10 '18 at 20:09

0 Answers0