如何异步并行获取one.js与two.js并保证顺序执行？求替代方案

当然有，给你几个更合理的替代方案，比用eval更安全也更符合浏览器规范：

• 并行获取+动态script标签执行
  用fetch同时发起两个文件的请求，拿到响应文本后，通过动态创建script标签来执行代码，保证先跑one.js再跑two.js。这种方式比eval更安全，因为脚本执行机制和浏览器加载普通脚本一致，避免了eval带来的安全风险和性能问题。

  代码示例：

  // 并行发起两个文件的请求
  const fetchOne = fetch('one.js').then(res => res.text());
  const fetchTwo = fetch('two.js').then(res => res.text());
  
  // 等待两个请求都完成
  Promise.all([fetchOne, fetchTwo]).then(([oneCode, twoCode]) => {
    // 先执行one.js
    const scriptOne = document.createElement('script');
    scriptOne.textContent = oneCode;
    document.body.appendChild(scriptOne);
  
    // 如果one.js是同步代码，append后就已经执行完了，直接执行two.js
    const scriptTwo = document.createElement('script');
    scriptTwo.textContent = twoCode;
    document.body.appendChild(scriptTwo);
  
    // 要是one.js里有异步操作（比如请求数据），得等它的异步完成再执行two.js
    // 可以让one.js暴露一个Promise，比如：
    // window.oneReady.then(() => {
    //   document.body.appendChild(scriptTwo);
    // });
  });
  

• ES Modules预加载+顺序执行
  如果你的项目支持ES Modules，用预加载标签让浏览器并行拉取两个文件，再通过动态import()控制执行顺序，这是最现代的做法。

  先在HTML里加预加载：

  <!-- 告诉浏览器提前并行加载两个脚本 -->
  <link rel="preload" href="one.js" as="script">
  <link rel="preload" href="two.js" as="script">
  

  然后在JS里控制执行顺序：

  // 先加载并执行one.js，完成后再加载two.js
  import('./one.js').then(() => {
    import('./two.js');
  });
  

  要是one.js有导出内容，还能在then回调里拿到导出结果，传给two.js使用，灵活性很高。

• 将two.js包装成函数，按需调用
  修改two.js的结构，把所有代码放进一个全局函数里，这样获取到代码后，先执行one.js，再手动调用这个函数来触发two.js的执行。

  修改后的two.js：

  // two.js
  window.runTwoScript = () => {
    // 这里放原来two.js的所有代码
    console.log('two.js执行了');
    // 要是需要接收one.js的结果，还可以加参数：
    // window.runTwoScript = (oneResult) => { ... }
  };
  

  主执行代码：

  const fetchOne = fetch('one.js').then(res => res.text());
  const fetchTwo = fetch('two.js').then(res => res.text());
  
  Promise.all([fetchOne, fetchTwo]).then(([oneCode, twoCode]) => {
    // 先执行one.js
    const scriptOne = document.createElement('script');
    scriptOne.textContent = oneCode;
    document.body.appendChild(scriptOne);
  
    // 加载two.js的函数定义
    const scriptTwo = document.createElement('script');
    scriptTwo.textContent = twoCode;
    document.body.appendChild(scriptTwo);
  
    // 等one.js执行完成后，调用函数执行two.js的逻辑
    // 如果one有异步，同样要等异步完成再调用
    runTwoScript();
  });
  

内容的提问来源于stack exchange，提问作者Karthi Fair Hawn