[TOC] ## Fetch `fetch()`是 XMLHttpRequest 的升級版 1. `fetch()`使用 Promise，不使用回調函數，因此大大簡化了寫法，寫起來更簡潔。 2. `fetch()`采用模塊化設計，API 分散在多個對象上（Response 對象、Request 對象、Headers 對象），更合理一些；相比之下，XMLHttpRequest 的 API 設計并不是很好，輸入、輸出、狀態都在同一個接口管理，容易寫出非常混亂的代碼。 3. `fetch()`通過數據流（Stream 對象）處理數據，可以分塊讀取，有利于提高網站性能表現，減少內存占用，對于請求大文件或者網速慢的場景相當有用。XMLHTTPRequest 對象不支持數據流，所有的數據必須放在緩存里，不支持分塊讀取，必須等待全部拿到后，再一次性吐出來。 ## 使用樣式 ``` fetch('https://api.github.com/users/ruanyf') .then(response => { if (!response.ok) { throw new Error('Network response was not OK'); } return response.json() }) .then(json => console.log(json)) .catch(err => console.log('Request Failed', err)); ``` 使用 await 語法改寫 ``` async function getJSON() { let url = 'https://api.github.com/users/ruanyf'; try { let response = await fetch(url); return await response.json(); } catch (error) { console.log('Request Failed', error); } } ``` `await`語句必須放在`try...catch`里面，這樣才能捕捉異步操作中可能發生的錯誤