在前端开发中，我们经常需要从服务器获取数据。而在现代浏览器中，我们可以使用 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 数据：
-- -------------------- ---- -------
---------------------------------
-------------- -- -
-- ------------- -
------ ----------------
- ---- -
----- --- -------------- -------- --- --- -----
-
--
---------- -- -
-- -- ----
--
------------ -- -
-- -- -----
--在上面的例子中，我们首先检查 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 方法来等待所有请求完成：
-- -------------------- ---- -------
----- ---- - ----------------------------- ---------------------------- -----------------------------
------------------------ --
----------
-------------- -- ----------------
--
---------- -- -
-- -----------
--
------------ -- -
-- ----
--在上面的例子中，我们首先定义了一个包含多个 URL 的数组 urls。然后，我们使用 Promise.all 方法来等待所有请求完成，并使用 map 方法来对每个 URL 进行网络请求。最后，我们使用 then 方法来处理所有请求返回的数据。
除了 Promise.all 方法外，还有一个 Promise.race 方法。Promise.race 方法会等待多个 Promise 对象中的任意一个完成，然后立即返回该 Promise 对象的结果。这个方法经常用于设置请求超时时间：
-- -------------------- ---- -------
----- ------- - -----
--------------
----------------------------------
--- ----------------- ------- -- -
------------- -- -
---------- -------------- ----- -------
-- ---------
--
--
-------------- -- ----------------
---------- -- -
-- ----
--
------------ -- -
-- ----
--在上面的例子中，我们首先定义了一个超时时间 timeout。然后，我们使用 Promise.race 方法来等待 fetch 请求返回的 Promise 对象和一个超时 Promise 对象。如果请求超时，则 reject 一个错误。最后，我们使用 then 方法来处理返回的数据。
总结
在本文中，我们讨论了如何在 Promise 中使用 fetch API，并介绍了如何处理 fetch 返回的数据。我们还介绍了 Promise.all 和 Promise.race 方法，这些方法可以帮助我们更好地处理多个网络请求。希望本文能够对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658b9f7feb4cecbf2d0db995