簡介
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() 函數，該函數被設計得既簡單又強大。該函數用于發起網絡請求，帶有兩個主要參數：
url：您要獲取的資源的url字符串。
options（可選）：包含請求的各種設置或配置的對象，例如 http 方法、標頭、正文內容和模式。
簡單fetch調用的結構
基本的獲取調用很簡單，如下所示：
fetch(url)
.then(response => {
// handle the response here
})
.catch(error => {
// handle any errors here
});
登錄后復制
url是要獲取資源的地址
then()方法處理fetch api解析的promise，提供response對象。
catch()方法處理請求期間可能發生的任何錯誤。
基本獲取請求示例
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 應用程序的關鍵組件。
