据我所知和研究...如果我的逻辑在这里错了,我会喜欢纠正。
当您尝试从网络或云服务(如AmazonWS)获取数据时,会使用 fetch()
,并且速度较慢?"而不是进口。 (获取用于不断更新的数据;天气,股票等)
import
,例如导入文件import ProductInformation from './ProductInformation.json';
。在反应中,只要渲染使用.json数据的组件,它就会加载。
如果我将.json文件存储在create-react-app中我的src文件夹中的components文件夹中,我应该使用import。
将来,如果我的客户想要使用我的应用程序并希望更改.json文件中的定价,我应该使用fetch()。
答案 0 :(得分:1)
你的假设几乎是正确的。只是为了澄清。
fetch or axios
用于提出http请求,无论服务器是什么,aws,azure,还是您自己的托管Web应用程序的静态文件服务器。因此,如果您在public
文件夹中保留一个json文件,就像您提到的客户端'需要进行更改,您可以使用fetch从服务器向您的json文件引发GET
。
但是如果你将json文件放在你的src
文件夹中并使用import,当你build
它将与你的bundlejs合并时,json对象将在你的应用程序内存中可用但是不会在public
文件夹中可用。
答案 1 :(得分:0)
简单导入用于导入绑定,由其他模块导出。 但是对于用于操作http请求和响应的fetch api。
答案 2 :(得分:0)
导入只是将您的文件导入当前文件。虽然Fetch将返回一个promise,您可以在需要时异步调用该文件。
导入只会从文件中获取导出的数据。使用fetch时,您可以获得完整的文件。
在运行时获取数据时,在编译时导入get数据。
答案 3 :(得分:0)
作为mdn状态,import用于导入由另一个模块导出的绑定,而fetch API提供一般用于获取资源的接口。请注意,并非所有Javascript引擎都支持ES6模块。
这些的使用主要取决于资源的位置以及您想要使用它做什么。当您声明要更改它时,我的建议是将其保留在服务器端并在您的json文件上执行require()
或fs.readFile/fs.writeFile
以提供RESTful功能。
在您的客户端代码中,您使用fetch API
使用不同的方法(GET | POST | PUT | ...)来启动更改或获取json文件中的信息。
答案 4 :(得分:0)
只需将import
视为从文件系统中读取即可。理论上,fetch
方法应始终比从文件系统中读取更慢,因为涉及网络延迟。
所以是的,主要区别在于从中获取数据的位置,因为import
从文件中读取并获取,以及通过HTTP请求获取数据。
为了得到更实际的答案,只需这样想:
- 如果这是一个永不改变的静态文件,只需导入,除非这是您不希望包含在最终捆绑中的私人信息
- 在所有其他场景中,您通常想要获取它
答案 5 :(得分:0)
这是两件完全不同的事情。
import
是ES2015语言版本中引入的语言结构,因此由TC39委员会指定(规范here)。另一方面,fetch
是一个Web API,因此由WHATWG指定(规范here)
他们根本没有解决同样的问题(也没有试图瞄准)。 import
解决了“模块问题”,你想要静态地声明你的依赖项并将它们绑定到JS标识符:这就是import * as identifier from "module"
。然而,Fetch是一种API,它提出了一种以异步方式访问网络的接口(XMLHTTPRequest用于支持同步操作iirc)。 Fetch通过引入新的全局函数fetch
和新的本机类来完成它:Request
,Response
,Headers
等等......
这两件事在概念上可能会重叠的是未来的import()
函数,它将允许动态加载ES2015模块,但仍然在stage 3