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

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

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

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è)問(wèn)題，我們將確保 JSON 文件位于本地或遠(yuǎn)程服務(wù)器上。如果我們?cè)?IDE 上使用 Live 服務(wù)器，則不會(huì)出現(xiàn)此錯(cuò)誤。但是當(dāng)我們直接加載文件時(shí)，會(huì)得到這個(gè)錯(cuò)誤。

正如我之前所說(shuō)，假設(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ù)雜性，但我們將解決所有問(wèn)題：

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

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

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

為了解決這個(gè)問(wèn)題，我們可以在引用 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 文件類(lèi)型添加到 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 中提取該文件。

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

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

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

補(bǔ)充：js Fetch API

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

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

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

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

一個(gè)基本的 fetch 請(qǐng)求設(shè)置起來(lái)很簡(jiǎn)單?？纯聪旅娴拇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);
  });

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

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

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

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

總結(jié)

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

相關(guān)文章

最新評(píng)論