簡介
Fetch API 代表了 Web 應用程式與伺服器互動以及透過網路檢索內容的方式的重大演進。 Fetch API 作為 XMLHttpRequest (XHR) 的現代替代方案推出，為開發人員提供了更強大的功能、靈活性和簡單性。隨著與現代瀏覽器的集成，Fetch 已成為建立當代 Web 應用程式的重要工具，能夠更自然、更有效率地處理非同步操作。
Fetch API 是什麼？
Fetch API 是一個 JavaScript 接口，可簡化發送 HTTP 請求和處理網路回應。與舊的 XMLHttpRequest 不同，Fetch 提供了一個與 JavaScript 的 Promise API 無縫整合的簡化介面。這種整合不僅使管理非同步操作變得更加容易，還提高了程式碼的可讀性和可維護性，使您的程式碼庫更乾淨、更易於管理。
Fetch 的核心是圍繞 fetch() 函數構建的，這是現代瀏覽器中可用的發送網路請求的全域函數。此函數傳回解析為 Response 物件的 Promise，讓開發人員可以輕鬆存取回應資料、標頭和狀態。這允許採用更直觀、更有組織的方法來處理網路請求的結果。 (閱讀更多)
基本文法
Fetch API 圍繞著 fetch() 函數，該函數被設計得既簡單又強大。此函數用於發起網路請求，並帶有兩個主要參數：
簡單取得調用的結構
基本的獲取呼叫非常簡單，如下所示：
fetch(url)
.then(response => {
// Handle the response here
})
.catch(error => {
// Handle any errors here
});
基本取得請求範例
fetch('https://api.example.com/data')
.then(response => {
console.log(response);
})
.catch(error => {
console.error('Error:', error);
});
此範例示範如何發出簡單的 Fetch 要求，成功後將回應記錄到控制台，並妥善處理錯誤。
為什麼要用 Fetch？
使用 Fetch 的優點
Promises： Fetch 最顯著的優點之一是它對 Promises 的使用。與 XHR 基於回呼的方法相比，Promise 提供了一種更清晰、更易於管理的方式來處理非同步任務。使用 Promises，您可以連結 .then() 方法來處理成功回應，並連結 .catch() 方法來管理錯誤，從而使程式碼更具可讀性且更易於偵錯。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
此外，Fetch API 與 async/await 語法完美搭配，讓非同步程式碼更加簡單。
使用 async/await 的範例：
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
更簡潔的語法： 與 XHR 相比，Fetch 提供了現代且簡潔的語法。傳遞給 fetch() 的配置物件可以輕鬆設定請求參數，例如 HTTP 方法、標頭和正文內容，從而使程式碼更簡潔、更易於維護。 （閱讀全文
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
流處理： Fetch 支援回應流，這使得開發人員能夠更有效地處理大量資料。雖然 XHR 可能會難以應對大型回應，從而導致效能問題或需要額外的處理來進行區塊處理，但 Fetch 的 Response 物件提供了 .body.getReader() 等方法來讀取區塊中的資料。這對於串流和管理大型資料集特別有用。
fetch('https://api.example.com/large-data')
.then(response => {
const reader = response.body.getReader();
let decoder = new TextDecoder();
let result = '';
return reader.read().then(function processText({ done, value }) {
if (done) {
console.log('Stream finished.');
return result;
}
result += decoder.decode(value, { stream: true });
return reader.read().then(processText);
});
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
閱讀全文 - 點此
結論
Fetch API 徹底改變了開發人員在 Web 應用程式中發出網路請求的方式。憑藉其簡潔的語法、與 Promises 的無縫整合以及對非同步/等待和串流等現代功能的支持，Fetch 提供了一個強大而靈活的工具來處理 HTTP 請求。隨著 Web 開發的不斷發展，Fetch API 將仍然是建立高效、可維護和現代 Web 應用程式的關鍵元件。
以上是了解 Fetch API：Web 開發中網路請求的未來的詳細內容。更多資訊請關注PHP中文網其他相關文章！
