web-dev-qa-db-ja.com

`fetch`を使用して別のJSスクリプトを実行できますか？

中間のJS/JQの人はここにいます。

私はJS fetchを使用してコールバック地獄をエスケープしようとしています。これは「AJAXの代替」として請求され、かなり強力なようです。それを使用してHTMLおよびJSONオブジェクトを取得する方法を確認できますが、現在使用しているスクリプトから別のJSスクリプトを実行できますか？たぶん、ES6にはもう1つの新しい関数があります。

$.getScript( 'xxx.js' );

つまり.

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

...？

後で、ジョセフ・ザ・ドリーマーへの応答：

これを試しました：

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

...スクリプト「generic.js」は実行されませんでした。他の意味ですか？

javascriptjqueryasynchronousecmascript-6
16
mike rodent

Fetch APIは、リモートデータをフェッチするためのpromiseベースのAPIを提供することになっています。ランダムなリモートスクリプトの読み込みはnot AJAX-jQuery.ajaxはそれが可能です。 Fetch APIでは処理されません。

スクリプトを動的に追加し、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は、スクリプトの読み込み用にpromiseベースのAPIを提供することになっており、同様に使用できます。

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

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

ここで言及すべきことがいくつかあります。

はい、サーバーからロードされたばかりのJavaScriptを実行することは可能です。ファイルをテキストおよびユーザーeval（...）としてフェッチできますが、追跡できない副作用とセキュリティの欠如のため、これは推奨されません。

別のオプションは次のとおりです。1. JavaScriptファイルをロードします。2.ファイルの内容（またはブラウザがファイルをキャッシュするため、URL）でスクリプトタグを作成します。

これは機能しますが、コールバックの地獄そのものから解放されるわけではありません。

必要なものが、たとえばrequirejsなど、使用できる他のJavaScriptファイルを動的にロードする場合は、モジュールを定義して動的にロードできます。 http://requirejs.org/ を見てください。

あなたが本当にコールバック地獄から抜け出したいのなら、あなたがする必要があるのは

  • 関数を定義します（クライアントでrequirejsを使用して同じファイルに関数をロードしたり、別のファイルからロードしたり、展開前にコンパイルできる余裕がある場合はwebpackを使用したりできます）
  • 必要に応じてpromiseまたはstreamを使用します（Rxjs https://github.com/Reactive-Extensions/RxJS を参照）

  • Promise.thenはpromiseを返します

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

約束を構成できることを覚えておいてください

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