在现代的 Web 开发中，经常会遇到需要从服务器端获取数据的情况。为了处理这种异步数据请求，Web API 提供了诸多的方法和工具。其中一种最常用和强大的工具就是 Fetch API。
Fetch API 是一种基于 Promise 的 HTTP 请求 API，它提供了一个简单，灵活和强大的方式来发起网络请求，并且可以通过回调函数或者 Promise 链式调用的方式处理响应结果。
发起一个基本的 GET 请求
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
以上的代码是一个基本的使用 Fetch API 发起一个 GET 请求并处理响应结果的例子。我们使用了 fetch() 方法来发起请求，传入了一个 URL。然后，我们通过 Promise 的 then() 方法来处理响应结果，如果请求成功，则将结果转换为 JSON 格式，并打印到控制台上。同时，我们也可以通过 .catch() 方法来处理请求的错误。
处理 POST 请求
如果需要向服务器发送一些数据，我们可以使用 Fetch API 的 method 参数以及 body 参数来处理 POST 请求。下面是一个例子，展示了如何通过 Fetch API 发起一个 POST 请求并发送 JSON 数据。
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: 'John', age: 30 }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
以上代码中，我们使用了 method: 'POST' 来指定该请求是一个 POST 请求，并且通过 headers 参数设置了请求体的内容类型为 JSON。我们将一个包含姓名和年龄的对象通过 body 参数传递，并使用 JSON.stringify() 方法将对象转换为 JSON 字符串。
处理请求的头部信息
在 Fetch API 中，我们可以通过 headers 参数来设置请求的头部信息。下面是一个例子，展示了如何设置并发送携带身份认证信息的请求头部。
const headers = new Headers();
headers.append('Authorization', 'Bearer 1234567890');
fetch('https://api.example.com/data', {
headers: headers,
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
在以上代码中，我们首先创建了一个新的 Headers 对象，并通过 append() 方法添加了一个身份认证的 Authorization 头部。然后，在发起请求时，我们将这个头部信息通过 headers 参数传递给 fetch() 方法。
处理请求的错误
在发送异步请求时，难免会遇到一些网络错误或者状态码错误。通过 Fetch API，我们可以使用 Promise 的 .catch() 方法来处理这些错误。下面是一个处理请求错误的例子：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network Error!');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.log(error.message));
在以上的例子中，我们在第一个 .then() 方法中检查了请求的状态码，如果状态码不是在 200-299 的区间内，我们就抛出了一个错误。然后，在 .catch() 方法中处理该错误，并打印错误信息。
总结
Fetch API 是一种强大且易于使用的工具，可以帮助我们发送异步请求并处理响应结果。在本篇博客中，我们介绍了 Fetch API 的基本用法，包括发起 GET 和 POST 请求，设置请求头部信息以及处理请求错误。希望这些内容能帮助你更好地理解和使用 Fetch API。
本文来自极简博客，作者：开发者故事集，转载请注明原文链接：使用Fetch API进行异步数据请求
