欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年11月11日 15:00:53   作者：helloyangkl  
json文件是一種輕量級的數(shù)據(jù)交互格式,下面這篇文章主要給大家介紹了關于Javascript讀取json文件方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

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 服務器，則不會出現(xiàn)此錯誤。但是當我們直接加載文件時，會得到這個錯誤。

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

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

2.使用 Import 語句在 JavaScript 中讀取 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" 腳本標簽，如下所示：

<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 文件，以及在使用每種方法時可能遇到的錯誤。

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

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

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

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

補充：js Fetch API

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

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

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

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

一個基本的 fetch 請求設置起來很簡單?？纯聪旅娴拇a：

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

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

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

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

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

總結

到此這篇關于Javascript讀取json文件方法的文章就介紹到這了,更多相關js讀取json文件方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論