JavaScript Fetch API: глобальный доступ к локальной переменной

Question

Я работаю над проектом с Fetch API. Я хотел бы использовать fetch, чтобы извлечь некоторые данные из текстовых файлов и поместить их в массивы, чтобы я мог работать с ними. Я не уверен, какой код использовать, чтобы сделать переменные глобальными. Я думал, что, инициализируя переменную вне оператора fetch, я мог бы использовать ее таким образом. Вот что у меня есть:

animals.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?
} 
})

Answer 1

Ну, во-первых, вы пытаетесь переназначить декларацию const, что запрещено. Если вы хотите, чтобы ваш код работал, вам нужно изменить его на let. Затем, чтобы сделать его глобальным, привяжите его к глобальному объекту window в браузере.

Однако принцип асинхронных запросов заключается в том, что вы хотите подождать, пока данные поступят, прежде чем что-то делать, поэтому размещение результата выборки в глобальной области имеет очень ограниченное применение, потому что вы хотите знать, когда данные прибыл.

Чтобы сделать это, вам просто нужно сделать все, что нужно сделать в .then() вашего fetch(). Существует почти всегда лучший способ работать с асинхронными данными, чем загрязнять глобальную область и иметь сложные системы событий или тайм-аутов, проверяющие изменения в определенной глобальной переменной.

Answer 2

Ответ на этот вопрос зависит от того, как вы манипулируете данными. Вы выполняете код внутри консоли вручную или код находится на веб-странице / в файле сценария?

Если вы просто выполняете код в консоли, тогда назначение данных глобальному объекту - это хорошо. Я бы хотя бы напечатал сообщение, чтобы знать, когда выборка завершена и данные доступны для использования.

Если вы выполняете код как часть более крупного сценария, вам нужно продолжить код в цепочке обещаний, иначе вы столкнетесь с проблемами синхронизации. Это связано с тем, что выборка асинхронна, и данные не будут доступны, пока он не завершит свой запрос. В общем случае лучше передавать данные в виде параметров, а не использовать глобальный объект, поскольку это делает поток программы более очевидным.