我們在前端開發過程中，通過服務器獲取數據的時候服務器返回的數據通常為JSON格式，今天小千就來教大家如何利用JavaScript解析服務器的響應獲取我們想要的數據。該過程通常包括兩個步驟：將數據解碼為本機結構（例如數組或對象），然后使用JavaScript的內置方法遍歷該數據結構。

       什么是JSON？JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。它基于 ECMAScript (w3c制定的JS規范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。（畫外音：JSON之父叫做Douglas Crockford，盡管他在社區里不算那么討喜，不過也無法否認他對JavaScript所作的貢獻，著名的開源項目JSlint也是他寫的，他還有出版一本書叫How JavaScript Works，中文譯名《JavaScript語言精粹》）

       數據可以通過兩種方式存儲在JSON中：名稱/值對的集合（又名JSON對象）、值的有序列表（又名JSON數組）。從Web服務器接收數據時，數據始終是字符串，這意味著將其轉換為可以使用的數據結構是必要工作，如果您想了解有關JSON如何工作的更多信息，可以訪問JSON網站。從遠程API獲取接口：

1. 使用XMLHttpRequest API

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {

if (xhr.readyState === XMLHttpRequest.DONE) {

console.log(typeof xhr.responseText);

console.log(xhr.responseText);

}

};

xhr.open('GET', 'https://www.easy-mock.com', true);

xhr.setRequestHeader('Accept', 'application/json');

xhr.send(null);

返回的數據為：

// string

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

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

if (xhr.readyState === XMLHttpRequest.DONE) {

const res = JSON.parse(xhr.responseText);

console.log(res);

};

//Object { id: "helloworld", joke: "today is Friday!", status: 200 }

2. 使用Fetch API

盡管上面使用XMLHttpRequest對象的方法效果很好，但在復雜的場景下它就會變得非常笨拙。下面我們使用瀏覽器新提供的api,它是window對象上定義的方法fetch，你可以使用該方法執行請求。此方法返回一個Promise，可用于檢索請求的響應。

(async () => {

const res = await fetch('https://icanhazdadjoke.com/', {

headers: { Accept: 'application/json' },

});

const json = await res.json();

Object.entries(json).forEach(([key, value]) => {

console.log(`${key}: ${value}`);

});

})();

// id : helloworld

// joke : today is Friday

// status : 200

Fetch API返回響應流。這不是JSON，因此JSON.parse()需要嘗試使用它的response.json()函數而不是對其進行調用。這將返回一個Promise，該Promise會將響應的正文文本解析為JSON的結果進行解析。

三、 多種方式遍歷數據

1. 使用for...in

const res = JSON.parse(xhr.responseText);

for (const key in res){

if(obj.hasOwnProperty(key)){

console.log(`${key} : ${res[key]}`)

}

}

// id : helloworld

// joke : today is Friday

// status : 200

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

const res = JSON.parse(xhr.responseText);

Object.entries(res).forEach((entry) => {

const [key, value] = entry;

console.log(`${key}: ${value}`);

});

// id : helloworld

// joke : today is Friday

// status : 200

3. 處理數組

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

對于這個示例，我們將使用GitHub的REST API來獲取用戶存儲庫的列表：

(async () => {

async function getRepos(username) {

const url = `https://api.github.com/users/${username}/repos`;

const response = await fetch(url);

const repositories = await response.json();

return repositories;

}

const repos = await getRepos('sylove');

console.log(repos);

})();

// Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

如您所見，API返回了一個對象數組。要訪問每個單獨的對象，我們可以使用常規forEach方法：

repos.forEach((repo) => {

console.log(`${repo.name} has ${repo.stargazers_count} stars`);

});

// CQ has 0 stars

// VM99:14 Food has 1 stars

// VM99:14 vue-blog-generater has 0 stars

// VM99:14 YouDe has 0 stars

// ...

另外，您當然可以使用上面討論的任何方法來遍歷對象的所有屬性，并將它們記錄到控制臺：

repos.forEach((repo) => {

Object.entries(repo).forEach(([key, value]) => {

console.log(`${key}: ${value}`);

});

});

// id: 187614270

// VM104:15 node_id: MDEwOlJlcG9zaXRvcnkxODc2MTQyNzA=

// VM104:15 name: CQ

// ...

       在這篇文章中，我們研究了什么是JSON。我已經演示了如何將服務器的JSON響應解析為本機數據結構（例如數組或對象），以及如何遍歷這種結構以訪問其中包含的數據。我們大部分web服務與服務器的交互都是圍繞這個這個展開，希望這篇文章對您有所幫助。

上一篇

千鋒長沙前端培訓分享之大前端算法入門之二分查找

下一篇

千鋒長沙java培訓分享之Socket編程