在现代 web 应用程序中，数据获取是一个非常重要的任务。Fetch API 是一个新的 web 标准，旨在提供一种更简单、更强大的方式来处理网络请求。Fetch API 可以轻松地从服务器获取数据，并且可以与现有的 JavaScript 代码无缝集成。本文将介绍 Fetch API 的基础知识，以及如何在浏览器中使用它。
Fetch API 的基础知识
Fetch API 是一种新的网络请求 API，它可以用于获取数据、上传数据或者进行其他网络请求。Fetch API 的语法非常简单，只需要一个 URL 和一个配置对象即可完成请求。以下是 Fetch API 的基本语法：
fetch(url [, options]);
其中，url 参数是请求的 URL，options 参数是一个配置对象，可以包含请求头、请求方法、请求体等信息。Fetch API 的返回值是一个 Promise 对象，它可以被用于处理响应数据。
在使用 Fetch API 发送网络请求时，需要注意以下几点：
- 如果请求成功，Fetch API 返回一个 Response 对象，它包含了响应的信息，例如状态码、响应头和响应体。
- 如果请求失败，Fetch API 抛出一个错误。可以通过 catch() 方法来捕获这个错误。
- Fetch API 默认情况下不会发送或接收任何 cookie。如果需要发送 cookie，需要在配置对象中设置 credentials 属性为 'include'。
- Fetch API 默认情况下不会遵循重定向。如果需要自动遵循重定向，需要在配置对象中设置 redirect 属性为 'follow'。
如何在浏览器中使用 Fetch API
在浏览器中使用 Fetch API 非常简单。以下是一个基本的示例，它从服务器获取 JSON 数据并将其显示在页面上：
// javascriptcn.com 代码示例
fetch('https://api.example.com/data.json')
.then(response => response.json())
.then(data => {
const list = document.querySelector('#list');
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item.name;
list.appendChild(li);
});
})
.catch(error => console.error(error));在这个示例中，我们首先使用 fetch() 方法发送一个 GET 请求，然后使用 then() 方法来处理响应数据。在第一个 then() 方法中，我们将响应数据解析为 JSON 格式，然后在第二个 then() 方法中使用解析后的数据来更新页面。如果请求失败，我们使用 catch() 方法来处理错误。
除了基本的 GET 请求之外，Fetch API 还支持其他类型的请求，例如 POST、PUT 和 DELETE 请求。以下是一个发送 POST 请求的示例：
// javascriptcn.com 代码示例
fetch('https://api.example.com/data', {
method: 'POST',
body: JSON.stringify({
name: 'John',
age: 30
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));在这个示例中，我们使用 fetch() 方法发送一个 POST 请求，并在配置对象中设置请求体和请求头。在第一个 then() 方法中，我们将响应数据解析为 JSON 格式，并在第二个 then() 方法中使用解析后的数据。
总结
Fetch API 是一个非常强大的网络请求 API，它可以用于获取数据、上传数据或者进行其他网络请求。在浏览器中使用 Fetch API 非常简单，只需要一个 URL 和一个配置对象即可完成请求。在使用 Fetch API 时，需要注意请求成功和请求失败的情况，并且需要根据实际情况设置配置对象中的各种属性。希望本文对你有所帮助，让你更好地理解和使用 Fetch API。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6569bcf9d2f5e1655d2493f4