當前位置：首頁 > 编程语言 > java >内容正文

java

Javascript——读取json文件方法总结

發(fā)布時間：2023/12/10 java 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javascript——读取json文件方法总结小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.使用Fetch API 方法在 JavaScript 中讀取json

?2.使用 Import 語句在 JavaScript 中讀取 JSON 文件

小結

當我們想要從外部服務器或本地文件讀取 JSON 文件到 JavaScript 文件時，使用 Fetch API 是更可取的方法

fetch('./data.json').then((response) => response.json()).then((json) => console.log(json));

?在上面，我們已經(jīng)能夠讀取本地 JSON 文件。但不幸的是，當我們在瀏覽器中運行它時，可能會收到以下 CORS 錯誤，因為我們的文件不在服務器上。

為了解決這個問題，我們將確保 JSON 文件位于本地或遠程服務器上。如果我們在 IDE 上使用 Live 服務器，則不會出現(xiàn)此錯誤。但是當我們直接加載文件時，會得到這個錯誤。

正如我之前所說，假設我們在遠程服務器上有這個 JSON 文件，并試圖用 JavaScript 讀取這個文件，相同的語法將起作用：?

fetch('https://server.com/data.json').then((response) => response.json()).then((json) => console.log(json));

除了發(fā)出 HTTP 請求之外，我們還可以使用的另一種方法是 import 語句。這種方法有一些復雜性，但我們將解決所有問題：

假設我們有保存用戶數(shù)據(jù)的 JSON 文件，可以通過這種方式使用?import?語句在 JavaScript 中讀取這個 JSON 數(shù)據(jù)：

import data from './data.json'; console.log(data);

?不幸的是，這會拋出一個錯誤，說我們不能在模塊之外使用?import?語句。當我們嘗試在常規(guī) JavaScript 文件中使用?import?語句時，這是一個標準錯誤，尤其是對于不熟悉 JavaScript 的開發(fā)人員。

為了解決這個問題，我們可以在引用 JavaScript 文件的 HTML 文件中添加?type="module"?腳本標簽，如下所示：

當我們這樣做時，仍然會得到另一個錯誤，為了修復這個錯誤，我們需要將 JSON 文件類型添加到?import?語句中，然后我們就可以在 JavaScript 中讀取 JSON 文件：

import data from './data.json' assert { type: 'JSON' }; console.log(data);

?只要我們在本地或遠程服務器上運行文件，它就可以完美地工作。但是假設我們在本地運行它，就會得到 CORS 錯誤。

在本文中，我們學習了如何在 JavaScript 中讀取 JSON 文件，以及在使用每種方法時可能遇到的錯誤。

當你要發(fā)出 HTTP 請求時，最好使用 Fetch API 方法。例如，假設我們從一個模擬 JSON 文件中獲取數(shù)據(jù)，我們最終將從 API 中提取該文件。

不過，在我們不需要使用 HTTP 請求的情況下，可以使用?import?語句。當我們使用像 React、Vue 等與模塊有關的庫時，可以使用?import?語句。這意味著我們不需要添加模塊的類型，也不需要添加文件的類型。

這兩種方法都不需要你安裝包或使用內(nèi)置的庫。選擇使用哪種方法完全取決于你。

但是區(qū)分這些方法的一個快速提示是，Fetch API 通過發(fā)送 HTTP 請求來讀取 JavaScript 中的 JSON 文件，而?import?語句不需要任何 HTTP 請求，而是像我們所做的其他所有導入一樣工作

以上是生活随笔為你收集整理的Javascript——读取json文件方法总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。