Web 开发中，网络请求故障是个经常出现的问题。jQuery 和现代浏览器的 Ajax 请求支持错误回调，可以在请求失败的时候执行代码。但是，我们需要在多处重复编写处理错误的代码来兼容旧浏览器和使用原生 XMLHttpRequest 的库。这将会影响开发效率，尤其是在大型项目中。
为了解决这个问题，我们可以使用 handle-xhr-error 这个 npm 包。它可以集成到你的项目中，帮你用最少的代码量解决网络请求错误的问题。下面是一个使用教程。
安装
可以通过 npm 安装 handle-xhr-error。
npm install handle-xhr-error --save
基本用法
handle-xhr-error 接收 XMLHttpRequest 对象和一个回调函数。回调函数会在请求失败的时候被执行。这个回调函数会传递一个对象作为参数，包含以下属性。
status：HTTP 状态码。statusText：HTTP 状态码对应的文字说明。responseText：请求返回的文本数据。
-- -------------------- ---- ------- ------ -------------- ---- ------------------- ----- --- - --- ----------------- --------------- ------------ ------ ------------------- -- ------- ----------- ------------ -- -- - --------------------------- ---------------- ------------------------------------ --- -----------
高级用法
自定义错误处理代码
通常我们需要根据请求的不同类型定义不同的错误处理代码。此时可以在回调函数中编写代码来执行自定义逻辑。
-- -------------------- ---- -------
------ -------------- ---- -------------------
----- --- - --- -----------------
---------------- -------------
------------------- -- ------- ------------ -- -- -
-- ------- --- ---- -
----- - ----- ------- - - -------------------------
-------------------------
- ---- -
------------------------------
------------------------------------
-
---
-------------------------
----- -------
---- --
----统一错误处理
如果你需要在整个项目中统一处理网络请求错误，可以编写一个统一的错误处理函数，把它传递给 handle-xhr-error。
-- -------------------- ---- ------- ------ -------------- ---- ------------------- -------- -------------- ------- ------------ -- - ------------------------------ ------------------------------------ - ----- ---- - --- ----------------- ---------------- --------------- -------------------- -------------- ------------ ----- ---- - --- ----------------- ----------------- ------------- -------------------- -------------- -------------------------- ----- ------- ---- -- ----
支持 Promise
通过下面的方法可以使用 Promise 调用 handle-xhr-error。
-- -------------------- ---- -------
------ -------------- ---- -------------------
-------- --------- -
----- --- - --- -----------------
--------------- -------------
------ --- ----------------- ------- -- -
------------------- -- ------- ------------ -- -- -
-- ------- --- ---- -
----------------------------------
- ---- -
---------------------- ------------------
-
---
-----------
---
-
------------------- -- -
------------------
-------------- -- -
-------------------
---结语
使用 handle-xhr-error，你可以在项目中轻松统一管理网络请求错误。此外，它还支持 Promise，可以更容易地与现有的异步流程进行集成。希望这个教程可以帮助你更好地处理网络请求错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055be681e8991b448d98f0