如何使用Fetch API进行网络请求

在现代的Web开发中，经常需要与服务器进行通信来获取数据或执行各种操作。在过去，我们通常使用XMLHttpRequest对象来进行网络请求，但是现在有一种更现代和强大的方式来处理网络请求，那就是使用Fetch API。

Fetch API是一个新的浏览器API，用于进行网络请求，并返回一个Promise对象，通过该对象可以处理响应数据。Fetch API比XMLHttpRequest更简洁易用，并且提供了更多的功能和灵活性。在本博客中，我们将介绍如何使用Fetch API进行网络请求，并展示一些Fetch API的高级用法。

基本用法

使用Fetch API进行网络请求非常简单，只需要调用fetch()函数，传入请求的URL和一些可选的配置参数即可。例如，以下示例演示了如何获取一个JSON格式的数据：

fetch('https://api.example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上面的例子中，fetch()函数发送了一个GET请求到指定的URL，并返回一个Promise对象。我们使用.then()方法来处理响应数据，以及.catch()方法来处理请求失败的情况。

配置参数

除了URL外，你还可以传入一些可选的配置参数给fetch()函数，以定制请求的行为。以下是一些常用的配置参数：

• method: 设置请求方法，可以是GET、POST、PUT等，默认为GET。
• headers: 设置请求头，可以是一个对象或Headers实例。
• body: 设置请求体，可以是一个字符串或FormData对象。
• mode: 设置请求模式，可以是cors、no-cors、same-origin等，默认为cors。
• credentials: 设置是否发送凭证，可以是omit、same-origin、include等，默认为same-origin。
• cache: 设置缓存模式，可以是default、no-store、reload等，默认为default。

例如，以下示例演示了如何发送一个POST请求并附带JSON数据：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ foo: 'bar' })
})
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上面的例子中，我们通过method配置参数设置请求方法为POST，通过headers配置参数设置请求头为Content-Type: application/json，通过body配置参数设置请求体为一个包含foo: 'bar'的JSON字符串。

错误处理

在网络请求中，错误是不可避免的。使用Fetch API，我们可以通过.catch()方法来处理请求过程中的错误。例如，以下示例演示了如何处理请求超时的情况：

const timeoutPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('请求超时')), 5000);
});

Promise.race([
  fetch('https://api.example.com/data'),
  timeoutPromise
])
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上面的例子中，我们创建了一个timeoutPromise，该Promise对象在5秒后会被拒绝，并抛出一个错误。然后，我们使用Promise.race()方法来竞争两个Promise对象的结果，如果请求在5秒内没有完成，就会触发超时错误。

高级用法

Fetch API还提供了一些高级的用法，以满足更复杂的请求需求。以下是一些示例：

• 取消请求：可以使用AbortController来取消请求。例如，以下示例演示了如何取消一个请求：

  const controller = new AbortController();
  
  fetch('https://api.example.com/data', { signal: controller.signal })
    .then(response => response.json())
    .then(data => {
      // 处理响应数据
      console.log(data);
    })
    .catch(error => {
      // 处理错误
      console.error(error);
    });
  
  // 取消请求
  controller.abort();
  

• 监听进度：可以使用response.body的getReader()方法来实时监听请求进度。例如，以下示例演示了如何监听下载进度：

  fetch('https://example.com/big-file')
    .then(response => {
      const reader = response.body.getReader();
      let receivedLength = 0;
  
      return new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close();
                return;
              }
  
              receivedLength += value.length;
              console.log(`已下载：${receivedLength}字节`);
  
              controller.enqueue(value);
              push();
            });
          }
  
          push();
        }
      });
    })
    .then(stream => new Response(stream))
    .then(response => response.blob())
    .then(blob => {
      // 处理下载完成的Blob数据
      console.log(blob);
    })
    .catch(error => {
      // 处理错误
      console.error(error);
    });
  

• 使用拦截器：可以使用fetch全局变量的fetch方法来添加拦截器，以实现请求和响应的处理。例如，以下示例演示了如何添加一个拦截器来在请求头中添加令牌：

  const tokenInterceptor = {
    request(request) {
      request.headers.set('Authorization', `Bearer ${token}`);
      return request;
    },
    response(response) {
      // 这里可以对响应进行处理
      return response;
    }
  };
  
  fetch('https://api.example.com/data', { interceptors: [tokenInterceptor] })
    .then(response => response.json())
    .then(data => {
      // 处理响应数据
      console.log(data);
    })
    .catch(error => {
      // 处理错误
      console.error(error);
    });
  

以上只是Fetch API的一些基本和高级用法的示例，实际上还有更多功能和灵活性等待你去发现和应用。

总结

使用Fetch API进行网络请求是现代Web开发的一种理想方式。它比传统的XMLHttpRequest更简洁易用，并且提供了更多的功能和灵活性。在本博客中，我们介绍了Fetch API的基本用法、配置参数、错误处理以及一些高级用法。希望你能从中获得一些启发，并在你的项目中充分应用Fetch API的强大功能。

本文来自极简博客，作者：紫色薰衣草，转载请注明原文链接：如何使用Fetch API进行网络请求