js 使用fetch进行网络请求|极客笔记

js 使用fetch进行网络请求

在前端开发中，经常需要向服务器发送网络请求来获取数据或操作服务器资源。fetch 是一种用于发送网络请求的新标准API，它提供了更简单、更强大的方式来发送网络请求和处理响应。本文将介绍如何使用 fetch 进行网络请求，以及一些常见的用法和注意事项。

基本用法

使用 fetch 发送网络请求非常简单。你只需要调用 fetch 函数，并传入需要请求的URL即可。下面是一个简单的示例：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，我们向一个公开的JSON数据接口发送了一个GET请求，并在控制台中打印了返回的数据。接下来我们逐步解释上面代码的实现：

我们调用 fetch 函数，并传入需要请求的URL作为参数，这里我们请求了一个JSON数据接口。
fetch 函数返回一个 Promise 对象，我们可以使用 .then() 方法获取响应对象。
我们在第一个 then 中调用 response.json() 方法将响应数据转换为JSON格式。
在第二个 then 中，我们获取到了转换后的JSON数据，并打印在控制台中。
如果在整个过程中出现了错误，我们可以使用 catch 方法捕获异常。

请求方法和选项

fetch 函数除了可以发送GET请求之外，也可以发送其他类型的请求，如POST、PUT、DELETE等。我们可以传入第二个参数来配置请求的方法和选项。下面是一个发送POST请求的示例：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，我们向同一个JSON数据接口发送了一个POST请求，传入了一些数据来创建新的资源。在配置参数中，我们可以指定请求的方法、请求体内容、请求头等选项。

处理响应

在fetch中，每次网络请求成功后，服务器都会返回一个 Response 对象，我们可以通过调用不同的方法来处理这个响应对象。除了上面示例中使用的 json() 方法，还有其他一些方法可以获取响应：

text()：返回一个Promise，将响应数据转换为文本格式。
blob()：返回一个Promise，将响应数据转换为二进制格式。
arrayBuffer()：返回一个Promise，将响应数据转换为 ArrayBuffer 格式。
formData()：返回一个Promise，将响应数据转换为 FormData 格式。

下面是一个使用 text() 方法的示例：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error(error));

异步问题

由于 fetch 是异步操作，因此需要特别注意处理异步问题。在上面的示例中，我们使用了 then() 方法来处理成功的回调函数，以及 catch() 方法来处理失败的回调函数。当有多个并发请求时，可能需要使用 Promise.all() 等方法来处理多个请求的并发和串行。

下面是一个使用 Promise.all() 处理多个并发请求的示例：

const urls = ['https://jsonplaceholder.typicode.com/posts/1', 'https://jsonplaceholder.typicode.com/posts/2'];

Promise.all(urls.map(url => fetch(url)
  .then(response => response.json())
  .catch(error => console.error(error))
))
  .then(posts => console.log(posts));

在这个示例中，我们定义了一个包含两个URL的数组，然后使用 map() 方法发送多个并发请求，并使用 Promise.all() 方法将所有请求的结果组合为一个Promise。最后我们使用 .then() 方法获取所有请求的结果。