В чем разница между import и fetch () при использовании локального файла .json в React
Насколько мне известно и исследования ... Хотел бы исправить, если моя логика здесь неверна.
fetch() используется, когда вы пытаетесь получить данные из сети или облачной службы, такой как AmazonWS, и работает «медленнее»? чем импорт. (выборка предназначена для данных, которые постоянно обновляются; погода, акции и т. д.)
import как импорт файла import ProductInformation from './ProductInformation.json'; используется, если у вас есть локальный файл. В ответ это загрузится, как только будет отрисован компонент, использующий данные .json.
Если я сохраню свой файл .json в папке компонентов, которая находится внутри моей папки src в приложении create-response-app, я должен использовать импорт.
В будущем, если мой клиент захочет использовать мое приложение и хочет изменить цены в файле .json, я должен использовать fetch ().
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
просто import используется для привязки импорта, который экспортируется каким-либо другим модулем. но для API выборки, используемого для управления HTTP-запросом и ответом.
Импорт просто импортирует ваш файл в текущий файл. В то время как Fetch вернет обещание, и вы можете вызывать этот файл в любое время асинхронно.
Импорт получит только экспортированные данные из файла. при использовании выборки вы можете получить полный файл.
Импортировать данные get во время компиляции, а Fetch получить данные во время выполнения.
Как указано в mdn, импорт используется для импорта привязок, которые экспортируются другим модулем, в то время как получить API предоставляет интерфейс для выборки ресурсов в целом. Обратите внимание, что не все движки Javascript поддерживают модули ES6.
Их использование зависит в первую очередь от того, где находится ресурс и что вы хотите с ним делать. Поскольку вы заявляете, что хотите изменить его, я предлагаю оставить его на стороне сервера и сделать require() или fs.readFile/fs.writeFile в вашем json-файле, чтобы обеспечить функциональность RESTful.
В вашем клиентском коде вы используете fetch API с разными методами (GET | POST | PUT | ...), чтобы инициировать изменения или получить информацию в вашем json-файле.
Ваше предположение почти верно. Просто для ясности.
fetch or axios предназначен для создания HTTP-запроса независимо от того, какой сервер есть, aws, azure или даже вашего собственного статического файлового сервера, на котором вы размещаете свое веб-приложение. Итак, если вы храните файл json в папке public, как вы упомянули о необходимости внесения изменений клиентами, вы можете использовать выборку, чтобы поднять GET в файл json с сервера.
Но если вы поместите файл json в свою папку src и используете импорт, когда вы build, он будет объединен с вашими bundlejs, там объект json будет доступен в памяти вашего приложения, но не будет доступен в папке public.
Просто подумайте о import как о чтении из вашей файловой системы. Теоретически метод fetch всегда должен быть медленнее, чем чтение из вашей файловой системы, поскольку в нем присутствует сетевая задержка.
Так что да, основное различие в том, откуда берутся данные, поскольку import читает из ваших файлов и извлекает, ну, извлекает через HTTP-запрос.
To get to the more practical answer, just think of it like this :
- if this is a static file, that never changes, just import it, except if this is private information that you dont want to be included in your final bundle
- in all other scenarios, you usually want to fetch it
Это две совершенно разные вещи.
import - это языковая конструкция, представленная в версии языка ES2015, и как таковая определяется комитетом TC39 (спецификация здесь). С другой стороны, fetch - это веб-API, определенный WHATWG (спецификация здесь).
Они вообще не решают одну и ту же проблему (и не пытаются ее решить). import решает «проблему модуля», когда вы хотите статически объявить свои зависимости и привязать их к идентификатору JS: это и есть import * as identifier from "module". Однако Fetch - это API, который предлагает интерфейс для доступа к сети в асинхронном режиме (XMLHTTPRequest используется для поддержки синхронных операций iirc). Fetch делает это, вводя новую глобальную функцию fetch и новые собственные классы: Request, Response, Headers и так далее ...
Эти две вещи могут концептуально совпадать с будущей функцией import(), которая позволит динамически загружать модуль ES2015, но все еще находится в 3 этап.