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('网络响应不是ok');
}
return response.json();
})
.then(data => {
console.log('用户数据:', data);
})
.catch(error => {
console.error('fetch操作出现问题:', error);
});

让我们分解一下：

1. 我们首先用我们想要获取数据URL调用 fetch()。
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('网络响应不是ok');
}
const data = await response.json();
console.log('用户数据:', data);
} catch (error) {
console.error('fetch操作出现问题:', 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('成功:', 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);
}
}

fetchData('https://api.example.com/data')
.then(data => console.log('获取的数据:', data));

这个简单的函数可以用来从任何URL获取数据，展示了Fetch API的简单性和灵活性。

就是这样，伙计们！我们已经穿越了Fetch API的世界，从了解它是什么，到处理响应，使用选项，以及欣赏它的优势。记住，就像任何技能一样，掌握Fetch API需要练习。所以不要害怕尝试和尝试不同的请求。

快乐编码，愿你的fetch请求总能带回你所寻找的数据！

Credits: Image by storyset