Javascript讀取json文件方法實例總結

Posted on by

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小結

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

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

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

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

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

補充：js Fetch API

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

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

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

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

一個基本的 fetch 請求設置起來很簡單。看看下面的代碼：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();   //由於返回值不是真的json，而是json形式的文本，需要調用json()進行轉換
  })
  .then(function(myJson) {
    console.log(myJson);
  });

這裡我們通過網絡獲取一個 JSON 文件並將其打印到控制臺。最簡單的用法是隻提供一個參數用來指明想 fetch() 到的資源路徑，然後返回一個包含響應結果的promise（一個 Response 對象）。

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

註意：Body mixin 還有其他相似的方法，用於獲取其他類型的內容。參考 Body

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

總結

到此這篇關於Javascript讀取json文件方法的文章就介紹到這瞭,更多相關js讀取json文件方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：