JavaScript Fetch API：全局访问局部变量答案

【问题标题】：JavaScript Fetch API: accessing local variable globallyJavaScript Fetch API：全局访问局部变量
【发布时间】：2018-10-28 01:52:00
【问题描述】：

我正在使用 Fetch API 开发一个项目。我想使用 fetch 从文本文件中获取一些数据并将它们放入数组中，以便我可以使用它们。我不确定使用什么代码来使变量成为全局变量。我认为通过在 fetch 语句之外初始化变量，我可能能够以这种方式使用它。到目前为止，这是我所拥有的：

动物.txt

cat
dog
rabbit

index.js

const animalArray;
fetch('animals.txt')
    .then((res) => res.text())
    .then(data => {
      animalArray = data.split(/\r?\n/) //how can I access this outside of the fetch statement?
} 
})

【问题讨论】：

简而言之，你不能。由于 fetch 是异步的，任何在 .then 之外访问 animalArray 的代码都可能会在 fetch 完成之前运行。任何依赖于获取结果的东西都必须直接或间接地放在.then 中。
How do I return the response from an asynchronous call?的可能重复
只需将与它们一起使用的代码放在 then 回调中即可。

标签： javascript arrays variables global fetch-api

【解决方案1】：

一方面，您正在尝试重新分配 const 声明，这是被禁止的。如果您希望您的代码正常工作，您必须将其更改为 let。然后，要使其成为全局对象，请将其绑定到浏览器中的全局对象 window。

但是，异步请求的原理是你想等待数据到达后再做某事，所以将fetch的结果放在全局范围内用处非常有限，因为你希望能够知道什么时候有数据已经到了。

为了做到这一点，你只需要在你的fetch() 的.then() 中做任何事情。几乎总有一种更好的方式来处理异步数据，而不是污染全局范围并让复杂的事件系统或超时检查特定全局变量的变化。

【讨论】：

【解决方案2】：

这个问题的答案取决于您如何处理数据。您是在控制台中手动执行代码还是在网页/脚本文件中执行代码？

如果您只是在控制台中执行代码，那么将数据分配给全局对象就可以了。我至少会打印一条消息以了解提取何时完成并且数据可供使用。

如果您将代码作为较大脚本的一部分执行，那么您需要在 Promise 链中继续您的代码，否则您会遇到时间问题。这是因为 fetch 是异步的，在完成请求之前数据将不可用。一般来说，最好将数据作为参数传递，而不是使用全局对象，因为它使程序的流程更加明显。

【讨论】：