Javascript讀取json文件方法實(shí)例總結(jié)
1.使用Fetch API 方法在 JavaScript 中讀取json
當(dāng)我們想要從外部服務(wù)器或本地文件讀取 JSON 文件到 JavaScript 文件時(shí),使用 Fetch API 是更可取的方法
fetch('./data.json') .then((response) => response.json()) .then((json) => console.log(json));
在上面,我們已經(jīng)能夠讀取本地 JSON 文件。但不幸的是,當(dāng)我們?cè)跒g覽器中運(yùn)行它時(shí),可能會(huì)收到以下 CORS 錯(cuò)誤,因?yàn)槲覀兊奈募辉诜?wù)器上。
為了解決這個(gè)問(wèn)題,我們將確保 JSON 文件位于本地或遠(yuǎn)程服務(wù)器上。如果我們?cè)?IDE 上使用 Live 服務(wù)器,則不會(huì)出現(xiàn)此錯(cuò)誤。但是當(dāng)我們直接加載文件時(shí),會(huì)得到這個(gè)錯(cuò)誤。
正如我之前所說(shuō),假設(shè)我們?cè)谶h(yuǎn)程服務(wù)器上有這個(gè) JSON 文件,并試圖用 JavaScript 讀取這個(gè)文件,相同的語(yǔ)法將起作用:
fetch('https://server.com/data.json') .then((response) => response.json()) .then((json) => console.log(json));
2.使用 Import 語(yǔ)句在 JavaScript 中讀取 JSON 文件
除了發(fā)出 HTTP 請(qǐng)求之外,我們還可以使用的另一種方法是 import 語(yǔ)句。這種方法有一些復(fù)雜性,但我們將解決所有問(wèn)題:
假設(shè)我們有保存用戶數(shù)據(jù)的 JSON 文件,可以通過(guò)這種方式使用 import
語(yǔ)句在 JavaScript 中讀取這個(gè) JSON 數(shù)據(jù):
import data from './data.json'; console.log(data);
不幸的是,這會(huì)拋出一個(gè)錯(cuò)誤,說(shuō)我們不能在模塊之外使用 import
語(yǔ)句。當(dāng)我們嘗試在常規(guī) JavaScript 文件中使用 import
語(yǔ)句時(shí),這是一個(gè)標(biāo)準(zhǔn)錯(cuò)誤,尤其是對(duì)于不熟悉 JavaScript 的開(kāi)發(fā)人員。
為了解決這個(gè)問(wèn)題,我們可以在引用 JavaScript 文件的 HTML 文件中添加 type="module"
腳本標(biāo)簽,如下所示:
<html lang="en"> // ... <body> <script type="module" src="./index.js"></script> </body> </html>
當(dāng)我們這樣做時(shí),仍然會(huì)得到另一個(gè)錯(cuò)誤,為了修復(fù)這個(gè)錯(cuò)誤,我們需要將 JSON 文件類(lèi)型添加到 import
語(yǔ)句中,然后我們就可以在 JavaScript 中讀取 JSON 文件:
import data from './data.json' assert { type: 'JSON' }; console.log(data);
只要我們?cè)诒镜鼗蜻h(yuǎn)程服務(wù)器上運(yùn)行文件,它就可以完美地工作。但是假設(shè)我們?cè)诒镜剡\(yùn)行它,就會(huì)得到 CORS 錯(cuò)誤。
小結(jié)
在本文中,我們學(xué)習(xí)了如何在 JavaScript 中讀取 JSON 文件,以及在使用每種方法時(shí)可能遇到的錯(cuò)誤。
當(dāng)你要發(fā)出 HTTP 請(qǐng)求時(shí),最好使用 Fetch API 方法。例如,假設(shè)我們從一個(gè)模擬 JSON 文件中獲取數(shù)據(jù),我們最終將從 API 中提取該文件。
不過(guò),在我們不需要使用 HTTP 請(qǐng)求的情況下,可以使用 import
語(yǔ)句。當(dāng)我們使用像 React、Vue 等與模塊有關(guān)的庫(kù)時(shí),可以使用 import
語(yǔ)句。這意味著我們不需要添加模塊的類(lèi)型,也不需要添加文件的類(lèi)型。
這兩種方法都不需要你安裝包或使用內(nèi)置的庫(kù)。選擇使用哪種方法完全取決于你。
但是區(qū)分這些方法的一個(gè)快速提示是,F(xiàn)etch API 通過(guò)發(fā)送 HTTP 請(qǐng)求來(lái)讀取 JavaScript 中的 JSON 文件,而 import
語(yǔ)句不需要任何 HTTP 請(qǐng)求,而是像我們所做的其他所有導(dǎo)入一樣工作
補(bǔ)充:js Fetch API
Fetch API提供了一個(gè) JavaScript 接口,用于訪問(wèn)和操縱HTTP 管道的一些具體部分,例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch()方法,該方法提供了一種簡(jiǎn)單,合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。
這種功能以前是使用XMLHttpRequest 實(shí)現(xiàn)的。Fetch 提供了一個(gè)更理想的替代方案,可以很容易地被其他技術(shù)使用,例如 Service Workers。Fetch 還提供了專(zhuān)門(mén)的邏輯空間來(lái)定義其他與 HTTP 相關(guān)的概念,例如 CORS 和 HTTP 的擴(kuò)展。
請(qǐng)注意,fetch 規(guī)范與 jQuery.ajax() 主要有三種方式的不同:
- 當(dāng)接收到一個(gè)代表錯(cuò)誤的 HTTP 狀態(tài)碼時(shí),從fetch()返回的 Promise 不會(huì)被標(biāo)記為 reject, 即使響應(yīng)的 HTTP 狀態(tài)碼是 404 或 500。相反,它會(huì)將 Promise 狀態(tài)標(biāo)記為 resolve (但是會(huì)將 resolve 的返回值的 ok 屬性設(shè)置為 false ),僅當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí),才會(huì)標(biāo)記為 reject。
- fetch() 不會(huì)接受跨域 cookies;你也不能使用 fetch() 建立起跨域會(huì)話。其他網(wǎng)站的 Set-Cookie 頭部字段將會(huì)被無(wú)視。
- fetch 不會(huì)發(fā)送 cookies。除非你使用了credentials 的初始化選項(xiàng)。(自 2017 年 8 月 25 日以后,默認(rèn)的 credentials 政策變更為 same-origin。Firefox 也在 61.0b13 版本中進(jìn)行了修改)
一個(gè)基本的 fetch 請(qǐng)求設(shè)置起來(lái)很簡(jiǎn)單??纯聪旅娴拇a:
fetch('http://example.com/movies.json') .then(function(response) { return response.json(); //由于返回值不是真的json,而是json形式的文本,需要調(diào)用json()進(jìn)行轉(zhuǎn)換 }) .then(function(myJson) { console.log(myJson); });
這里我們通過(guò)網(wǎng)絡(luò)獲取一個(gè) JSON 文件并將其打印到控制臺(tái)。最簡(jiǎn)單的用法是只提供一個(gè)參數(shù)用來(lái)指明想 fetch() 到的資源路徑,然后返回一個(gè)包含響應(yīng)結(jié)果的promise(一個(gè) Response 對(duì)象)。
當(dāng)然它只是一個(gè)HTTP 響應(yīng),而不是真的JSON。為了獲取JSON的內(nèi)容,我們需要使用 json()方法( json()方法在 Body mixin 接口中定義, Request 和 Response 對(duì)象實(shí)現(xiàn)該接口,因此也實(shí)現(xiàn)了該方法)。確切來(lái)說(shuō),此時(shí)只是獲取了一個(gè)Json形式的文本,通過(guò)Body.json(),讀取 Response 對(duì)象并且將它設(shè)置為已讀(因?yàn)?Responses 對(duì)象被設(shè)置為了 stream 的方式,所以它們只能被讀取一次),并返回一個(gè)被解析為 JSON 格式的 Promise 對(duì)象。
注意:Body mixin 還有其他相似的方法,用于獲取其他類(lèi)型的內(nèi)容。參考 Body
最好使用符合內(nèi)容安全策略 (CSP)的鏈接而不是使用直接指向資源地址的方式來(lái)進(jìn)行Fetch的請(qǐng)求。
總結(jié)
到此這篇關(guān)于Javascript讀取json文件方法的文章就介紹到這了,更多相關(guān)js讀取json文件方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例(2則實(shí)例)
這篇文章主要介紹了JS實(shí)現(xiàn)的倒計(jì)時(shí)效果,列舉了兩則JavaScript倒計(jì)時(shí)效果代碼供大家參考,原理基本相似,代碼簡(jiǎn)潔實(shí)用,需要的朋友可以參考下2015-12-12JavaScript常用數(shù)組去重實(shí)戰(zhàn)源碼
本文給大家分享js常用8種數(shù)組去重實(shí)戰(zhàn)源碼,針對(duì)每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2021-07-07Highcharts 非常實(shí)用的Javascript統(tǒng)計(jì)圖demo示例
官網(wǎng)實(shí)例中給出了各式各樣的demo,可以參照document修改自己需要的即可,本文實(shí)現(xiàn)的是一個(gè)學(xué)生成績(jī)走勢(shì)demo,有需求的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07Javascript hasOwnProperty 方法 & in 關(guān)鍵字
hasOwnProperty :如果 object 具有指定名稱(chēng)的屬性,那么方法返回 true;反之則返回 false。2008-11-11uniapp web-view組件雙向通信的問(wèn)題記錄
本文主要介紹在uniapp中頁(yè)面與webview組件內(nèi)頁(yè)面的雙向通信問(wèn)題,本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù)示例
這篇文章主要介紹了JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù),涉及javascript針對(duì)字符串的遍歷、統(tǒng)計(jì)、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下2019-07-07JS實(shí)現(xiàn)隨機(jī)亂撞彩色圓球特效的方法
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)亂撞彩色圓球特效的方法,可實(shí)現(xiàn)彩色小球的碰撞效果,涉及隨機(jī)函數(shù)與頁(yè)面樣式的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05