JavaScript - Fetch API：初學者指南

您好，有志於成為程序員的各位！今天，我們將踏上一段令人振奮的旅程，探索JavaScript的Fetch API世界。別擔心你對編程是新手——我將成為你的友好導遊，一步步為你解釋一切。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們一起來深入探討吧！

Fetch API是什麼？

想像你在一間餐廳裡，你想點你最喜歡的菜。你叫來服務員（那就是你在發出請求），服務員去廚房（那就是伺服器），然後帶回你美味的食物（那就是回應）。Fetch API的工作方式與此類似，但處理的不是食物，而是數據！

Fetch API是一個現代的接口，讓你能在瀏覽器中向伺服器發出網絡請求。它就像一個信使，可以向伺服器發出請求並帶回你所需要的數據。

我們來看一個簡單的例子：

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

別擔心這看起來會讓人困惑——我們馬上就會詳細解析！

使用 'then...catch' �塊處理 Fetch() API 回應

現在，讓我們深入了解一下如何處理Fetch請求的回應。我們使用一種叫做 'then...catch' 塊的方法。把它想像成當服務員把你的訂單帶回來時（或者如果他們在途中弄掉了！），你要遵循的一套指示。

fetch('https://api.example.com/users')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('User data:', data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});

讓我們分解一下：

1. 我們從調用 fetch() 開始，並傳入我們想要獲取數據的URL。
2. 第一個 .then() 檢查回應是否正常。如果不正常，它會抛出一個錯誤。
3. 如果回應正常，我們將其轉換為JSON格式。
4. 第二個 .then() 獲取JSON數據並將其打印到控制台。
5. 如果在任何時點出現錯誤，.catch() 塊將處理該錯誤。

异步处理 Fetch() API 回應

有時候，我們希望代碼等待fetch操作完成後再繼續執行。這時，async/await 就派上用場了。這就像告訴服務員：“我在這裡等著，直到我的訂單準備好。”

async function fetchUsers() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('User data:', data);
} catch (error) {
console.error('There was a problem with the fetch operation:', error);
}
}

fetchUsers();

在這個例子中：

1. 我們定義了一個 async 函數叫做 fetchUsers。
2. 在函數內部，我們使用 await 等待fetch操作完成。
3. 然後我們等待回應被轉換為JSON。
4. 如果發生任何錯誤，它們會被 catch 塊捕獲。

Fetch() API 的選項

Fetch API不僅僅是關於獲取數據——你也可以定制你的請求！這就像在餐廳裡能夠指定你想要的食物如何準備。

這裡有一張表，列出了一些你可以與fetch一起使用的基本選項：

選項	描述	示例
method	要使用的HTTP方法（GET, POST等）	method: 'POST'
headers	你想要添加到請求中的任何頭部信息	headers: { 'Content-Type': 'application/json' }
body	你想要與請求一起發送的任何數據	body: JSON.stringify({ name: 'John' })
mode	你想要為請求使用的模式	mode: 'cors'

讓我們看一個使用這些選項的例子：

fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Doe',
email: '[email protected]'
})
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

在這個例子中，我們發送了一個POST請求並帶上了一些用戶數據。這就像在我們假想的餐廳中下一個定制訂單！

使用 Fetch() API 的優勢

現在我們已經探索了Fetch API，你可能會想：“我為什麼要用這個而不是其他方法？” 好吧，讓我告訴你一些它的優點：

1. 簡單性：Fetch內置於現代瀏覽器中，所以你不需要包含任何外部庫。

2. 基于Promise：Fetch返回Promises，這使得處理异步操作更加容易。

3. 靈活：你可以輕鬆地定制你的請求，有各種選項。

4. 現代：與較老的方法（如XMLHttpRequest）相比，它是一種更現代的做法。

5. 一致性：它在不同的瀏覽器中提供了一種一致的方法來發出網絡請求。

這裡有一個快速的例子，展示了這些優勢：

async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
}

fetchData('https://api.example.com/data')
.then(data => console.log('Fetched data:', data));

這個簡單的函數可以被重用來從任何URL獲取數據，展示了Fetch API的簡單性和靈活性。

這就是全部，各位！我們一起穿越了Fetch API的世界，從理解它是什么，到處理回應，使用選項，以及欣賞它的優勢。記住，像任何技能一樣，精通Fetch API需要練習。所以不要害怕嘗試並嘗試不同的請求。

祝編程愉快，願你的fetch請求總是能夠帶回你所尋找的數據！

Credits: Image by storyset