Question

我有两个javascript文件。第一个是request.js，它从URL提取JSON并格式化将其分配给全局变量的数据。第二个文件main.js使用全局变量中的数据。我遇到的问题是第二个javascript文件在解析来自URL的请求之前已运行。是否有任何方法可以阻止程序的其余部分运行，直到承诺被解决，而无需在request.js中调用main.js中的函数？

request.js：

...
fetch(url).then(res => res.json())
    .then((data) => {
        organiseData(data);
    })
    .catch(err => {
        throw err
    });
...

main.js：

...
loadImages(submissionArr, categoriesMap);
...

编辑：我试图避免在主文件中明确调用request.js文件，因为我计划将其与其他javascript文件一起使用。

Answer 1

将提取的内容包装到函数中并返回它的promise，因此您可以执行以下操作：

function getData() {  
    // return the fetch promise  
    return fetch(url).then(res => res.json())
        .then((data) => {       
            organiseData(data);
            // optionally return data if needed it down the chain
        })
        .catch(err => {
            throw err
        });    
}

然后从main调用它：

getData().then(data = > loadImages(submissionArr, categoriesMap);)

Answer 2

如上所述，返回承诺总是有帮助的，因为您可以.then将它们链接在一起?

似乎您可能无法控制项目中的各种文件，例如某些文件来自外部供应商？如果是这样，这是一个解决方案。这不是理想的方法，它要求这些功能存在于这些文件中并且永不更改，但它可以工作。同样，所有这些全局变量也不是一个好主意，但是如果由于外部供应商而您真的没有选择，我会明白的。

  <script src="request.js"></script>
  <script src="main.js"></script>
  <script>
    const data = {};

    function setGlobal(data) {
      window.data = { ...window.data, ...data };
      // function inside of main.js will read global
      organiseData();
    }

    // function inside of request.js
    getData()
      .then((data) => setGlobal(data))
      .catch((e) => console.log(e.message));
  </script>

这是一个codeandbox链接 https://codesandbox.io/s/agitated-antonelli-u5tdk?file=/index.html

等待承诺完成，然后再运行第二个javascript文件？

2 个答案: