我們?cè)谇岸碎_發(fā)過程中，通過服務(wù)器獲取數(shù)據(jù)的時(shí)候服務(wù)器返回的數(shù)據(jù)通常為JSON格式，今天小千就來教大家如何利用JavaScript解析服務(wù)器的響應(yīng)獲取我們想要的數(shù)據(jù)。

該過程通常包括兩個(gè)步驟：將數(shù)據(jù)解碼為本機(jī)結(jié)構(gòu)（例如數(shù)組或?qū)ο?#xff09;，然后使用JavaScript的內(nèi)置方法遍歷該數(shù)據(jù)結(jié)構(gòu)。

一、從遠(yuǎn)程API獲取接口

1、使用XMLHttpRequest API

返回的數(shù)據(jù)為：

// string

// {“id”:“helloworld”,“joke”:“today is Friday!”,“status”:200}

服務(wù)器返回了一個(gè)字符串。我們需要先將其解析為JavaScript對(duì)象，然后才能遍歷其屬性。我們可以使用JSON.parse()做到這一點(diǎn),如下顯示：

2、使用Fetch API

盡管上面使用XMLHttpRequest對(duì)象的方法效果很好，但在復(fù)雜的場(chǎng)景下它就會(huì)變得非常笨拙。下面我們使用瀏覽器新提供的api,它是window對(duì)象上定義的方法fetch，你可以使用該方法執(zhí)行請(qǐng)求。此方法返回一個(gè)Promise，可用于檢索請(qǐng)求的響應(yīng)。

Fetch API返回響應(yīng)流。這不是JSON，因此JSON.parse()需要嘗試使用它的response.json()函數(shù)而不是對(duì)其進(jìn)行調(diào)用。這將返回一個(gè)Promise，該P(yáng)romise會(huì)將響應(yīng)的正文文本解析為JSON的結(jié)果進(jìn)行解析。

二、多種方式遍歷數(shù)據(jù)

1、使用for…in

2、使用Object.entries，Object.values或Object.entries

3、處理數(shù)組

值的有序列表（也稱為數(shù)組）也是有效的JSON，讓我們研究如何處理此類響應(yīng)。

對(duì)于這個(gè)示例，我們將使用GitHub的REST API來獲取用戶存儲(chǔ)庫(kù)的列表：

如您所見，API返回了一個(gè)對(duì)象數(shù)組。要訪問每個(gè)單獨(dú)的對(duì)象，我們可以使用常規(guī)forEach方法：

另外，您當(dāng)然可以使用上面討論的任何方法來遍歷對(duì)象的所有屬性，并將它們記錄到控制臺(tái)：

結(jié)論

在這篇文章中，我們研究了什么是JSON。我已經(jīng)演示了如何將服務(wù)器的JSON響應(yīng)解析為本機(jī)數(shù)據(jù)結(jié)構(gòu)（例如數(shù)組或?qū)ο?#xff09;，以及如何遍歷這種結(jié)構(gòu)以訪問其中包含的數(shù)據(jù)。我們大部分web服務(wù)與服務(wù)器的交互都是圍繞這個(gè)這個(gè)展開，希望這篇文章對(duì)您有所幫助。

本文來自千鋒教育，轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

以上是生活随笔為你收集整理的JavaScript中循环遍历JSON响应！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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