Javascript讀取json文件方法實(shí)例總結(jié)

更新時間：2022年11月11日 15:00:53 作者：helloyangkl

json文件是一種輕量級的數(shù)據(jù)交互格式,下面這篇文章主要給大家介紹了關(guān)于Javascript讀取json文件方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

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

在上面，我們已經(jīng)能夠讀取本地 JSON 文件。但不幸的是，當(dāng)我們在瀏覽器中運(yùn)行它時，可能會收到以下 CORS 錯誤，因?yàn)槲覀兊奈募辉诜?wù)器上。

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

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

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

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

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

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

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

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

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

<html lang="en">
    // ...
    <body>
        <script type="module" src="./index.js"></script>
    </body>
</html>

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

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

只要我們在本地或遠(yuǎn)程服務(wù)器上運(yùn)行文件，它就可以完美地工作。但是假設(shè)我們在本地運(yùn)行它，就會得到 CORS 錯誤。

小結(jié)

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

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

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

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

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

補(bǔ)充：js Fetch API

Fetch API提供了一個 JavaScript 接口，用于訪問和操縱HTTP 管道的一些具體部分，例如請求和響應(yīng)。它還提供了一個全局 fetch()方法，該方法提供了一種簡單，合理的方式來跨網(wǎng)絡(luò)異步獲取資源。

這種功能以前是使用XMLHttpRequest 實(shí)現(xiàn)的。Fetch 提供了一個更理想的替代方案，可以很容易地被其他技術(shù)使用，例如 Service Workers。Fetch 還提供了專門的邏輯空間來定義其他與 HTTP 相關(guān)的概念，例如 CORS 和 HTTP 的擴(kuò)展。

請注意，fetch 規(guī)范與 jQuery.ajax() 主要有三種方式的不同：

當(dāng)接收到一個代表錯誤的 HTTP 狀態(tài)碼時，從fetch()返回的 Promise 不會被標(biāo)記為 reject，即使響應(yīng)的 HTTP 狀態(tài)碼是 404 或 500。相反，它會將 Promise 狀態(tài)標(biāo)記為 resolve （但是會將 resolve 的返回值的 ok 屬性設(shè)置為 false ），僅當(dāng)網(wǎng)絡(luò)故障時或請求被阻止時，才會標(biāo)記為 reject。
fetch() 不會接受跨域 cookies；你也不能使用 fetch() 建立起跨域會話。其他網(wǎng)站的 Set-Cookie 頭部字段將會被無視。
fetch 不會發(fā)送 cookies。除非你使用了credentials 的初始化選項(xiàng)。（自 2017 年 8 月 25 日以后，默認(rèn)的 credentials 政策變更為 same-origin。Firefox 也在 61.0b13 版本中進(jìn)行了修改）

一個基本的 fetch 請求設(shè)置起來很簡單?？纯聪旅娴拇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);
  });

這里我們通過網(wǎng)絡(luò)獲取一個 JSON 文件并將其打印到控制臺。最簡單的用法是只提供一個參數(shù)用來指明想 fetch() 到的資源路徑，然后返回一個包含響應(yīng)結(jié)果的promise（一個 Response 對象）。

當(dāng)然它只是一個HTTP 響應(yīng)，而不是真的JSON。為了獲取JSON的內(nèi)容，我們需要使用 json()方法（ json()方法在 Body mixin 接口中定義， Request 和 Response 對象實(shí)現(xiàn)該接口，因此也實(shí)現(xiàn)了該方法）。確切來說，此時只是獲取了一個Json形式的文本，通過Body.json()，讀取 Response 對象并且將它設(shè)置為已讀（因?yàn)?Responses 對象被設(shè)置為了 stream 的方式，所以它們只能被讀取一次），并返回一個被解析為 JSON 格式的 Promise 對象。

注意：Body mixin 還有其他相似的方法，用于獲取其他類型的內(nèi)容。參考 Body

最好使用符合內(nèi)容安全策略 (CSP)的鏈接而不是使用直接指向資源地址的方式來進(jìn)行Fetch的請求。