web-dev-qa-db-fra.com

Puis-je exécuter un script JS depuis un autre en utilisant `fetch`?

Intermédiaire inférieur JS/JQ ici.

J'essaie d'échapper à l'appel de rappel en utilisant JS fetch. Ceci est présenté comme "le remplacement de AJAX" et semble être assez puissant. Je peux voir comment vous pouvez obtenir des objets HTML et JSON avec elle ... mais est-il capable d'exécuter un autre script JS à partir de celui où vous êtes? Peut-être y at-il une autre nouvelle fonction à faire dans ES6:

$.getScript( 'xxx.js' );

c'est à dire.

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

...?

plus tard, réponse à Joseph le rêveur:

J'ai essayé ceci:

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

... il n'a pas exécuté le script "generic.js". Vouliez-vous dire autre chose?

javascriptjqueryasynchronousecmascript-6
7
mike rodent

L'API d'extraction est censée fournir une API basée sur des promesses pour extraire des données distantes. Le chargement du script distant aléatoire est pas AJAX - même si jQuery.ajax en est capable. Il ne sera pas géré par Fetch API.

Le script peut être ajouté dynamiquement et entouré d'une promesse:

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 est censé fournir une API basée sur des promesses pour le chargement de script et peut également être utilisé:

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

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

Il y a quelques choses à mentionner ici.

Oui, il est possible d'exécuter un javascript qui vient d'être chargé à partir du serveur. Vous pouvez récupérer le fichier en tant que texte et eval (...) alors que cela n'est pas recommandé en raison d'effets secondaires impossibles à suivre et du manque de sécurité!

Une autre option serait: 1. Chargez le fichier javascript 2. Créez une balise de script avec le contenu du fichier (ou url, car le navigateur met le fichier en cache)

Cela fonctionne, mais cela ne vous libérera peut-être pas du rappel de l'enfer.

Si vous souhaitez charger d'autres fichiers javascript de manière dinamique, vous pouvez par exemple requirejs, vous pouvez définir des modules et les charger de manière dinamically. Jetez un oeil à http://requirejs.org/

Si vous voulez vraiment sortir de l'enfer du rappel, ce que vous devez faire est

  • Définir des fonctions (vous pouvez les avoir dans le même fichier ou les charger à partir d'un autre fichier en utilisant requirejs dans le client ou un pack Web si vous pouvez vous permettre une compilation avant le déploiement)
  • Utilisez des promesses ou des flux si nécessaire (voir Rxjs https://github.com/Reactive-Extensions/RxJS )

  • Rappelez-vous cette promesse.

    someAsyncThing()
  .then(doSomethingAndResolveAnotherAsncThing)
  .then(doSomethingAsyncAgain)

Rappelez-vous que les promesses peuvent être composées

Promise.all(somePromise, anotherPromise, fetchFromServer)
  .then(doSomethingWhenAllOfThoseAreResolved)
1
cnexans