当在React中使用本地.json文件时,import和fetch()之间有什么区别

时间:2018-06-15 04:31:32

标签: javascript json reactjs

据我所知和研究...如果我的逻辑在这里错了,我会喜欢纠正。

当您尝试从网络或云服务(如AmazonWS)获取数据时,会使用

fetch(),并且速度较慢?"而不是进口。 (获取用于不断更新的数据;天气,股票等)

如果您有本地文件,则使用

import,例如导入文件import ProductInformation from './ProductInformation.json';。在反应中,只要渲染使用.json数据的组件,它就会加载。

如果我将.json文件存储在create-react-app中我的src文件夹中的components文件夹中,我应该使用import。

将来,如果我的客户想要使用我的应用程序并希望更改.json文件中的定价,我应该使用fetch()。

6 个答案:

答案 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和新的本机类来完成它:RequestResponseHeaders等等......

这两件事在概念上可能会重叠的是未来的import()函数,它将允许动态加载ES2015模块,但仍然在stage 3