fetch js 用法|极客笔记

fetch js 用法

在前端开发中，经常需要与后端服务器进行通信来获取数据或发送数据。在过去，我们通常使用AJAX来实现这一过程，但现在有了更加现代化和方便的解决方案——Fetch API。Fetch API提供了一种更简单、更强大的方式来处理网络请求，它基于Promise和Response对象，支持异步和链式调用，使得客户端和服务器之间的通信变得更加流畅和高效。

Fetch API的基本用法

Fetch API是基于Promise的，所以我们可以使用then()方法来处理fetch请求返回的结果。一个简单的fetch请求的基本语法如下：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

在上面的代码中，我们首先调用fetch函数，并传入我们想要请求的URL。然后我们使用.then()方法来处理返回的response对象，我们又调用response.json()方法将返回的数据转换为JSON格式。最后我们可以通过.then()方法获取到最终的数据，并进行处理。如果请求出错，我们可以通过.catch()方法来捕获错误并进行处理。

Fetch API的参数设置

除了URL之外，fetch函数还可以传入第二个参数，用来设置请求的一些配置参数，比如请求方法、请求头、请求体等。一个带参数的fetch请求的基本语法如下：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

在这个示例中，我们通过传入一个对象作为第二个参数，来设置请求的方法为POST，请求头中的Content-Type为application/json，请求体中的数据为data对象的JSON字符串。这样我们就可以将自定义的请求参数传递给fetch函数，实现更加灵活的网络请求。

Fetch API的进阶用法

Fetch API还支持一些进阶的用法，比如设置请求超时、取消请求、设置credentials等。下面是一些常用的进阶用法示例：

设置请求超时

有时候我们需要对网络请求设置超时时间，以防止请求过长时间没有返回导致页面卡死。我们可以使用Promise.race来实现这一功能，下面是一个设置请求超时的示例：

const fetchWithTimeout = (url, options, timeout = 5000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('timeout')), timeout)
    )
  ]);
};

fetchWithTimeout(url, { method: 'GET' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

在这个示例中，我们定义了一个fetchWithTimeout函数，该函数接受三个参数：url、options和timeout，默认超时时间为5秒。我们在Promise.race中同时发起fetch请求和一个延迟5秒的Promise对象，当一个先完成，就会返回该结果，如果超时则会抛出一个超时错误。

取消请求

有时候我们需要在请求过程中取消请求，比如用户关闭了对应的页面或者组件。我们可以使用AbortController来实现请求取消的功能，下面是一个取消请求的示例：

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

// 取消请求
controller.abort();

在这个示例中，我们首先创建一个AbortController对象和一个对应的signal信号。然后在发起fetch请求时，将signal信号传入fetch函数中。当我们需要取消请求时，调用controller.abort()即可取消对应的fetch请求。

设置credentials

在跨域请求的情况下，浏览器默认不会发送服务器的cookie等认证信息，如果需要发送cookie等信息，我们可以设置credentials参数为’include’。下面是一个设置credentials的示例：

fetch(url, {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

在这个示例中，我们通过将credentials参数设置为’include’，告诉浏览器发送credentials，这样就可以在跨域请求中发送cookie等认证信息了。