在前端开发中，我们经常需要从后端获取数据。而 Fetch API 是现代浏览器提供的一种获取数据的方式。它使用 Promise 对象来处理异步请求，相比于传统的 XMLHttpRequest 对象，代码更简洁易读。
但是，使用 Fetch API 还存在一些问题。例如，当请求失败时，Fetch API 并不会抛出异常，而是返回一个表示失败的 Promise 对象。这就需要我们手动处理错误。为了解决这些问题，我们可以使用 ES8 中的 async/await 和 try/catch 语法来封装 Fetch API，并实现错误处理。
封装 Fetch API
我们可以将 Fetch API 封装成一个函数，以便在项目中复用。在封装时，我们可以指定请求方法、请求头、请求体等参数。以下是一个简单的封装示例：
-- -------------------- ---- -------
----- -------- ------------ ------- - --- -
----- -------- - ----- ---------- ---------
----- ---- - ----- ----------------
-- ------------- -
------ -----
- ---- -
----- --- --------------------
-
-在这个封装中，我们使用了 async/await 语法来处理异步请求。当请求成功时，我们将响应内容转换成 JSON 格式，并返回数据。当请求失败时，我们抛出一个错误。
错误处理
在封装 Fetch API 时，我们使用了 throw new Error() 语句来抛出错误。但是在实际项目中，错误处理需要更加复杂。我们需要根据错误类型来进行不同的处理，例如网络错误、服务器错误等。
以下是一个更加完整的错误处理示例：
-- -------------------- ---- -------
----- -------- ------------ ------- - --- -
--- -
----- -------- - ----- ---------- ---------
----- ---- - ----- ----------------
-- ------------- -
------ -----
- ---- -
----- ----- - --- ------------------ -- ---------------------
-------------- - ---------
----- ------
-
- ----- ------- -
-- ------ ---------- ---------- -
----- --- ------------------------
- ---- -- --------------- -- --------------------- --- ---- -
----- --- ---------------------
- ---- -
----- ------
-
-
-在这个错误处理示例中，我们使用 try/catch 语句来捕获错误。当请求失败时，我们根据错误类型来进行不同的处理。例如，当出现网络错误时，我们抛出一个自定义的错误信息，提示用户检查网络设置。当出现服务器错误时，我们抛出一个自定义的错误信息，提示用户稍后再试。
使用示例
以下是一个使用封装后的 Fetch API 的示例：
-- -------------------- ---- -------
----- -------- ----------- -
----- --- - --------------------------------------
----- ------- - -
------- ------
-------- -
--------------- -------------------
---------------- ------- - - -----------------------------
-
--
--- -
----- ---- - ----- ------------ ---------
------------------
- ----- ------- -
---------------------
-
-在这个示例中，我们使用封装后的 Fetch API 来获取用户信息。我们指定了请求方法为 GET，请求头包含了 Content-Type 和 Authorization 等信息。当请求成功时，我们将用户信息输出到控制台。当请求失败时，我们将错误信息输出到控制台。
总结
使用 ES8 Fetch 机制进行 Fetch 封装与错误处理，可以让我们更加方便地处理异步请求和错误。在封装时，我们可以指定请求方法、请求头、请求体等参数。在错误处理时，我们需要根据错误类型来进行不同的处理。封装后的 Fetch API 可以在项目中复用，提高代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e9b4695b1f8cacd7b45cd