fetch获取本地json文件问题

写这个博客主要目的是有必要警醒一下自己,当然如果有其他猿有看到或许也能帮助下您。(也许其它大神在就知道了,恕小弟无知,才刚刚开窍)。

问题很简单:上码( header.jsx)

fetchSelData = () => {
        fetch('../data/selectData.json')
            .then((res) => {return res.json(); })
            .then((data) => {alert(JSON.stringify(data));this.setState({selV:data.obj});})
            .catch((e) => {console.log(e.message); });
    }    

上面是我用fetch获取本地的一个json文件,声明代码是没问题的。然后我的本地文件是放在在这个:


印象中“../”一直表示的是上一级,然而这里的上一级不是从header.jsx开始的。一直以为路径是没有问题的。故运行起来。但不幸的是报错了:


上面报的是json数据格式的有问题,所以就去看是不是数据的问题,json数据测试来测试去都没问题呀……就这样花费几个小时浪费在json数据上还有fetch版本上,最后不得已找了个远程数据来测试,是可以显示的。那问题就很明显了,报错的原因是找不到路径从而解析数据出错。

经过网上一番好找终于找到答案了。

原因就是这个里的“../”是相对你的首页index.html而言的。所以将json数据放在相对index.html上问题就解决了。


在浏览器环境中,由于安全限制,我们不能直接读取本地文件系统中的 JSON 文件,但我们可以使用 `fetch` 或者旧版的 `XMLHttpRequest` 来从本地静态资源(比如放在同一目录下的 HTML、CSS 或 JavaScript 文件中)加载 JSON 数据。这里是一个使用 `fetch` 示例: 首先,在同一个目录下创建一个名为 `bandWidthData.json` 的 JSON 文件,例如: ```json { "ports": [ {"id": 1, "bandwidth": 100}, {"id": 2, "bandwidth": 200} ] } ``` 然后在 JavaScript 代码中,你可以这样读取这个 JSON 文件: ```javascript function loadLocalJsonFile(filename) { return fetch(filename) .then(response => response.json()) // 解析 JSON 内容 .catch((error) => { throw new Error(`Failed to fetch local JSON file. ${error}`); }); } // 调用函数并处理返回的数据 loadLocalJsonFile('bandWidthData.json') .then(data => { console.log(data.ports); // 打印 JSON 对象的内容 }) .catch(error => { console.error('Error:', error); }); ``` 如果你使用的是旧版本的 XMLHttpRequest,可以这样做: ```javascript function loadLocalJsonFileWithXHR(filename) { const xhr = new XMLHttpRequest(); xhr.open("GET", filename, true); xhr.onload = function () { if (xhr.status === 200) { try { const data = JSON.parse(xhr.responseText); console.log(data.ports); } catch (error) { console.error('Error parsing JSON:', error); } } else { console.error('Request failed. Returned status of ' + xhr.status); } }; xhr.onerror = function () { console.error('There was a problem with the request.'); }; xhr.send(); } // 调用函数 loadLocalJsonFileWithXHR('bandWidthData.json'); ``` 这两个示例都是假设 JSON 文件在同源策略允许的范围内,即它们都在相同的域名或路径下。在实际生产环境中,通常会将数据放在服务器上,而不是直接在客户端使用本地文件
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值