首页 > 解决方案 > 这是顺序运行代码片段的好方法吗?

问题描述

<script src="./js/id.js"></script>
<script src="./js/fetch.js"></script>
<script src="./js/download.js"></script>
<script src="./js/playback.js"></script>

每个脚本都依赖于前者来完成。

标签: javascript

解决方案


这是一个好方法[...]

,但是如果里面的 javascript 是同步的,它将起作用。当您决定做一些异步fetch.js的事情(即:download.js听起来他们会做一些异步的事情)时,它就行不通了。


在每个文件中包装和公开一个异步函数怎么样。

例如,您可以fetch.js调用一个包装器函数并调用function myFetch(){ ... }一个download.js包装器函数function myDownload(){ ... },然后简单地使用await您从每个脚本文件中公开的每个包装器函数。

// fetch.js file
function myFetch(){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      console.log("my Fetch Done");
      resolve("myFetch");
    }, 500);
  })
}

// download.js file
function myDownload(){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      console.log("My download done");
      resolve("myDownload");
    }, 100);
  })
}

// main.js file

async function myMain(){
  // "synchronous"
  const res1 = await myFetch();
  const res2 = await myDownload();
  console.log('final log', res1, res2);
}

myMain();


推荐阅读