Javascript Fetch API

Fetch API 是 JavaScript 的 Web 平台 API，帮助开发者通过 HTTP/HTTPS 网络请求获取数据。Fetch API 与 XMLHttpRequest 对象不同，并支持 Promise API。Fetch API 在 ES6 中可以直接使用，直接发送网络请求，然后使用 then 语句和回调函数来具体操作返回的结果。

发送一个简单请求

Fetch API 使用 fetch() 方法，该方法接受一个 URL 参数，然后返回一个 Promise 对象。这个 Promise 对象用于获取响应数据，如下所示：

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

在这个示例中，fetch() 方法接受一个 URL 参数，并返回一个 Promise 对象。接下来，在 Promise 对象链中，我们将使用 response.json() 方法来解析响应数据，然后在控制台中输出数据。

处理响应

当服务器端返回一个 HTTP 响应，Fetch API 也会返回一个由 Response 对象表示的响应，该对象提供了许多方法来处理响应数据。我们可以使用以下方法获取响应数据：

• .json()：将响应体解析为 JSON 对象
• .text()：将响应体解析为 UTF-8 文本
• .blob()：将响应体解析为 Blob 对象
• .arrayBuffer()：将响应体解析为 ArrayBuffer 对象

你可以根据需要来选择以上方法中的一个或多个来处理响应数据。

添加请求头

Fetch API 还允许你为请求添加自定义头文件。例如，你可以使用一个名为 Authorization 的头文件来向服务器发出身份验证请求：

fetch(url, {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

在上述示例中，我们将一个名为 Authorization 的头文件与请求一起发送，值为 "Bearer " + token。你应该根据你的需求添加自定义头文件。

发送请求体

Fetch API 还可以发送请求正文（数据）。你可以使用方法 .send() 提交数据到服务器，方法还可以选择是以字符串还是以对象的方式提交数据：

const formData = new FormData();
 
formData.append('username', 'Groucho');
formData.append('accountnum', 123456); 
 
fetch('https://example.com/profile', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error(error);
});

在上面的示例中，我们通过 .append() 方法将数据添加到 formData 对象中。然后，我们使用 fetch() 方法将数据发送到我们的服务器，然后使用.then() 回调函数处理响应结果。

错误处理

使用 Fetch API 发送网络请求时可能会出现错误，这可能是由于网络连接问题，服务器没有响应等。Fetch API 通过 Promise 接口的 reject() 方法来报告错误。我们可以使用以下代码片段捕获错误：

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

在上述示例中，我们在 .then() 后面添加了 .catch() 来捕获错误。在这段代码中，如果存在任何错误，它将打印错误信息。

总结

本文介绍了 Fetch API，讲述了如何使用 fetch() 方法来发送 HTTP 请求和如何处理响应。使用 Fetch API ，我们可以轻松地向服务器发送和接收数据。Fetch API 更符合现代编程语言的使用规范，并为 JavaScript 开发人员提供了更加高效、简洁的网络编程体验。