什么是 Fetch API
Fetch API 是基于 Promise（承诺）的 API，使得 web 开发者能够轻松地进行异步数据请求和响应处理，实现数据的异步传输。Fetch API 并没有被所有浏览器完全支持。
如何使用 Fetch API 获取数据
要使用 Fetch API，我们需要使用 fetch() 方法，它是全局的方法。fetch() 方法的返回值是一个 Promise 对象，其中包含响应所代表的 Response 对象。
示例代码
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
上面的代码用于获取 JSONPlace Holder API 的第一篇帖子。在这个示例中，我们没有指定任何参数，因为我们只需要使用默认参数。
fetch() 方法的第一个参数是需要请求的 URL，fetch() 方法还可以使用第二个参数进行配置。我们可以使用不同的参数进行配置，如方法、头信息、模式等。
fetch() 方法有五个主要的配置选项:
method：请求的 HTTP 方法，如 GET、POST、PUT 等
headers：请求头，表示请求携带的额外信息，如 token、编码头等以键值对的形式保存
body：请求体，比如一些参数或者表单数据（参数根据 API 的要求定制）
mode：请求的模式，如 CORs、No CORs、same-origin 等
cache：请求携带的缓存，如 no-cache、no-store、force-cache 等
这些选项是可以按需设置的。比如，下面的代码使用 POST 方法上传数据：
示例代码
const data = { name: 'helloworld' };
fetch('https://api.com/posts', {
method: 'POST', // 请求方法
headers: {
'Content-Type': 'application/json' // 请求头
},
body: JSON.stringify(data) // 请求体
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
上面的代码将使用 POST 方法向 API 发送一个新的帖子。我们将 name 字段的值设置为 helloworld，并使用 JSON.stringify() 将数据串行化为字符串。
如何处理 API 的响应
在使用 fetch() 方法后，我们通常需要处理 API 的响应。响应对象（Response）包含一组方法，以对响应进行处理。
下面是一些常用的响应对象方法：
response.text()：将响应转换成纯文本格式并返回一个 Promise 对象
response.json()：将响应转换成 JSON 格式并返回一个 Promise 对象
response.arrayBuffer()：将响应转换成 ArrayBuffer 格式并返回一个 Promise 对象
response.blob()：将响应转换成 Blob 对象并返回一个 Promise 对象
response.formData()：将响应转换成 FormData 对象并返回一个 Promise 对象
response.clone()：对响应进行克隆，并返回克隆结果
response.ok：返回一个布尔值，表示响应是否成功，比如等于 200 或者 300 等
response.status：返回一个数字，表示响应的状态码。如 200 表示成功，404 表示找不到资源
response.statusText：返回一个字符串，表示响应的文字状态。比如 OK、NOT FOUND 等
response.headers.get('header-name')：返回指定响应头的值，比如内容类型
下面的代码是获取响应并将其转换成纯文本格式的示例：
示例代码
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
响应的类别和格式取决于 API，应该使用不同的方法来处理它们。如果使用 text() 处理 JSON 格式的响应，将会抛出错误。
如果您在使用 API 响应时遇到问题，最好检查浏览器的开发人员工具中的控制台，以获取更详细的错误信息。
结论
到目前为止，我们已经说明了如何使用 fetch() 方法获取数据，并对常用的响应对象方法进行了简述。使用 Fetch API，web 开发人员可以像使用 XMLHTTP 等传统方法一样获取异步数据，同时还可以更加便捷地处理响应对象。Fetch API 还提供了一组可配置的参数，以及一组强大的响应方法，有助于帮助开发人员更快、更高效地创建 Web 应用程序。