Promise 中如何使用 fetch API

在前端开发中，我们经常需要从服务器获取数据。而在现代浏览器中，我们可以使用 fetch API 来进行网络请求。fetch API 是一种基于 Promise 的网络请求 API，它提供了一种简单、灵活、可扩展的方式来进行网络请求。

在本文中，我们将讨论如何在 Promise 中使用 fetch API，以及如何处理 fetch 返回的数据。

使用 fetch API

fetch API 的基本用法非常简单，只需要传入一个 URL，就可以发起一个 GET 请求：

fetch('https://example.com/data')
  .then(response => {
    // 处理 response
  })
  .catch(error => {
    // 处理 error
  })

fetch 返回的是一个 Promise 对象，我们可以通过 then 方法来处理返回的数据。then 方法接收一个回调函数，该函数会在 fetch 请求成功时被调用，并将 response 作为参数传入。

在回调函数中，我们可以使用 response 对象来获取返回的数据。例如，我们可以使用 response.text() 方法来获取文本数据，使用 response.json() 方法来获取 JSON 数据：

fetch('https://example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .then(data => {
    // 处理 data
  })
  .catch(error => {
    // 处理 error
  })

在上面的例子中，我们首先检查 response 是否成功，如果成功则调用 response.json() 方法来获取 JSON 数据。如果失败，则抛出一个错误并通过 catch 方法来处理错误。

处理 fetch 返回的数据

在使用 fetch API 时，我们需要注意的是，fetch 返回的是一个 Promise 对象，而不是返回的数据本身。因此，我们需要在 Promise 中处理返回的数据。

如果我们只需要获取文本数据，可以使用 response.text() 方法来获取数据：

fetch('https://example.com/data')
  .then(response => response.text())
  .then(data => {
    // 处理文本数据
  })
  .catch(error => {
    // 处理错误
  })

如果我们需要获取 JSON 数据，可以使用 response.json() 方法来获取数据：

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理 JSON 数据
  })
  .catch(error => {
    // 处理错误
  })

如果我们需要获取二进制数据，可以使用 response.blob() 方法来获取数据：

fetch('https://example.com/data')
  .then(response => response.blob())
  .then(data => {
    // 处理二进制数据
  })
  .catch(error => {
    // 处理错误
  })

Promise.all 和 Promise.race

在实际开发中，我们经常需要同时发起多个网络请求。这时，我们可以使用 Promise.all 方法来等待所有请求完成：

const urls = ['https://example.com/data1', 'https://example.com/data2', 'https://example.com/data3'];

Promise.all(urls.map(url =>
  fetch(url)
    .then(response => response.json())
))
  .then(data => {
    // 处理所有请求返回的数据
  })
  .catch(error => {
    // 处理错误
  })

在上面的例子中，我们首先定义了一个包含多个 URL 的数组 urls。然后，我们使用 Promise.all 方法来等待所有请求完成，并使用 map 方法来对每个 URL 进行网络请求。最后，我们使用 then 方法来处理所有请求返回的数据。

除了 Promise.all 方法外，还有一个 Promise.race 方法。Promise.race 方法会等待多个 Promise 对象中的任意一个完成，然后立即返回该 Promise 对象的结果。这个方法经常用于设置请求超时时间：

const timeout = 5000;

Promise.race([
  fetch('https://example.com/data'),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Request timed out'));
    }, timeout);
  })
])
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  })

在上面的例子中，我们首先定义了一个超时时间 timeout。然后，我们使用 Promise.race 方法来等待 fetch 请求返回的 Promise 对象和一个超时 Promise 对象。如果请求超时，则 reject 一个错误。最后，我们使用 then 方法来处理返回的数据。

总结

在本文中，我们讨论了如何在 Promise 中使用 fetch API，并介绍了如何处理 fetch 返回的数据。我们还介绍了 Promise.all 和 Promise.race 方法，这些方法可以帮助我们更好地处理多个网络请求。希望本文能够对前端开发者们有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658b9f7feb4cecbf2d0db995