Javascript——读取json文件方法总结
目錄
1.使用Fetch API 方法在 JavaScript 中讀取json
?2.使用 Import 語(yǔ)句在 JavaScript 中讀取 JSON 文件
小結(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è)問題，我們將確保 JSON 文件位于本地或遠(yuǎn)程服務(wù)器上。如果我們?cè)?IDE 上使用 Live 服務(wù)器，則不會(huì)出現(xiàn)此錯(cuò)誤。但是當(dāng)我們直接加載文件時(shí)，會(huì)得到這個(gè)錯(cuò)誤。
正如我之前所說，假設(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ù)雜性，但我們將解決所有問題：
假設(shè)我們有保存用戶數(shù)據(jù)的 JSON 文件，可以通過這種方式使用?import?語(yǔ)句在 JavaScript 中讀取這個(gè) JSON 數(shù)據(jù)：
import data from './data.json'; console.log(data);?不幸的是，這會(huì)拋出一個(gè)錯(cuò)誤，說我們不能在模塊之外使用?import?語(yǔ)句。當(dāng)我們嘗試在常規(guī) JavaScript 文件中使用?import?語(yǔ)句時(shí)，這是一個(gè)標(biāo)準(zhǔn)錯(cuò)誤，尤其是對(duì)于不熟悉 JavaScript 的開發(fā)人員。
為了解決這個(gè)問題，我們可以在引用 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 文件類型添加到?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 中提取該文件。
不過，在我們不需要使用 HTTP 請(qǐng)求的情況下，可以使用?import?語(yǔ)句。當(dāng)我們使用像 React、Vue 等與模塊有關(guān)的庫(kù)時(shí)，可以使用?import?語(yǔ)句。這意味著我們不需要添加模塊的類型，也不需要添加文件的類型。
這兩種方法都不需要你安裝包或使用內(nèi)置的庫(kù)。選擇使用哪種方法完全取決于你。
但是區(qū)分這些方法的一個(gè)快速提示是，Fetch API 通過發(fā)送 HTTP 請(qǐng)求來(lái)讀取 JavaScript 中的 JSON 文件，而?import?語(yǔ)句不需要任何 HTTP 請(qǐng)求，而是像我們所做的其他所有導(dǎo)入一樣工作
總結(jié)
以上是生活随笔為你收集整理的Javascript——读取json文件方法总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： net start zabbix age
- 下一篇： Java动态查询