javascript - Can I run a JS script from another using `fetch`?

Question

Lower intermediate JS/JQ person here.

I'm trying to escape callback hell by using JS fetch. This is billed as "the replacement for AJAX" and seems to be pretty powerful. I can see how you can get HTML and JSON objects with it... but is it capable of running another JS script from the one you're in? Maybe there's another new function in ES6 to do:

$.getScript( 'xxx.js' );

i.e.

$.ajax({ url : 'xxx.js', dataType : "script", });

...?

later, response to Joseph The Dreamer:

Tried this:

const createdScript = $(document.createElement('script')).attr('src', 'generic.js');
fetch( createdScript )...

... it didn't run the script "generic.js". Did you mean something else?

Answer 1

Fetch API is supposed to provide promise-based API to fetch remote data. Loading random remote script is not AJAX - even if jQuery.ajax is capable of that. It won't be handled by Fetch API.

Script can be appended dynamically and wrapped with a promise:

const scriptPromise = new Promise((resolve, reject) => {
  const script = document.createElement('script');
  document.body.appendChild(script);
  script.onload = resolve;
  script.onerror = reject;
  script.async = true;
  script.src = 'foo.js';
});

scriptPromise.then(() => { ... });

SystemJS is supposed to provide promise-based API for script loading and can be used as well:

System.config({
  meta: {
    '*': { format: 'global' }
  }
});

System.import('foo.js').then(() => { ... });