fetch的使用

admin

在Web开发中，获取数据是常见的任务之一。fetch是一种在JavaScript中发送HTTP请求和获取响应的方法。fetch使用Promise对响应进行封装，比传统的XHR请求更容易使用。本文将介绍如何在JavaScript中使用Fetch，并提供一个实际的示例。
发送请求
( Z! v: A3 @4 O4 u. k* p- b使用fetch发送请求很简单，只需要提供请求URL和可选参数即可。
2 ^+ ^/ c. m) g  W

复制代码
fetch('https://www.XXX.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data));

在上面的示例中，我们向一个API发送了一个请求，并用.then()方法链式地调用了两个回调函数。
第一个.then()方法的参数是响应对象response。它提供了很多有用的方法，例如.json()，它将响应转换为JSON格式。
# ?9 m+ R+ N: F2 |% p/ _: D9 a9 I% l第二个.then()方法的参数是由.json()解析出的数据对象data。在这个示例中，我们只是将数据输出到控制台上。
在这里需要注意的是，fetch随着Promise的链式调用而进入回调函数，如果遇到了错误，它会返回rejected状态的Promise对象。因此，在终止回调链之前应始终使用.catch()处理错误。
% H0 |$ i! {0 s, J7 O4 y

复制代码
fetch('https://www.XXX.com/todos/0')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络错误');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log(error));

在上面的示例中，我们向一个不存在的API发送了一个请求，因此响应对象的.ok属性为false。在.then()方法中，我们使用throw语句来抛出一个错误。在.catch()方法中，我们捕获了这个错误并输出它的信息。
- s: @& x/ {5 j/ B, q5 {' i6 }4 F4 x发送POST请求
" R, q$ g6 @4 B' t# qfetch也可以用来发送POST请求。要发送POST请求，需要使用Request对象传递请求方法和请求头。要注意的是，fetch默认使用GET请求。

复制代码
fetch('https://www.XXX.com/api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'user',
    password: 'pass'
  })
}).then(response => response.json())
  .then(data => console.log(data));

在上面的示例中，我们向一个API发送了一个POST请求。我们使用JSON.stringify()将待发送的数据对象转换为JSON格式，并在请求头中设置Content-Type。
0 A$ h+ _! J! W/ y处理二进制数据
$ V5 ~' b' G" z% G- mfetch也可以处理二进制数据，如Blob、File和FormData等。以下是一个示例代码，演示如何下载二进制文件：
8 L8 O7 N! S3 y' o3 K* T, u

复制代码
fetch('https://www.XXX.com/img.png')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  });

在上面的示例中，我们向一个URL发送了一个请求，并使用blob()方法将响应转换为Blob对象。我们使用URL.createObjectURL()方法将Blob对象转换为可用于显示图像的URL。最后，我们将图像的URL添加到文档中。
总结
fetch是一种用于在JavaScript中发送HTTP请求和获取响应的方法。它使用Promise封装响应，比传统的XHR请求更容易使用。在本文中，我们介绍了如何使用fetch发送请求、如何发送POST请求、如何处理二进制数据。fetch简单易用，使用时需要注意的是，我们需要处理rejected状态的Promise对象，以及进行错误处理。