在前端开发中，异步请求是非常常见的操作，而在异步请求过程中，为了提升用户体验，通常需要添加 Loading 动画和错误提示。本文将介绍如何使用 Vue.js 实现异步请求时的 Loading 动画和错误提示。
Loading 动画实现方法
在 Vue.js 中，可以使用 v-if 指令来控制元素的显示和隐藏，我们可以通过在异步请求开始时显示 Loading 动画，在请求结束后隐藏 Loading 动画来实现 Loading 效果。
下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
---- -------------- --------------------------------
----
--- ----------- -- --------- ---- -------
-----
------- ------------------------ -------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------
------ ---
--
--
-------- -
----- ----------- -
------------ - -----
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
---------- - -----------
- ----- ------- -
---------------------
- ------- -
------------ - ------
-
--
--
--
---------
-------
-------- -
--------- ------
---- --
----- --
------ --
------- --
----------------- --------- ---- ---- -----
-------- -----
---------------- -------
------------ -------
-
--------在上面的示例代码中，我们使用了一个 loading 变量来控制 Loading 动画的显示和隐藏。在 fetchData 方法中，我们首先将 loading 变量设置为 true，表示开始显示 Loading 动画；然后通过 fetch 函数发送异步请求，等待数据返回后将数据赋值给 items 变量，并将 loading 变量设置为 false，表示隐藏 Loading 动画。
错误提示实现方法
在异步请求过程中，如果出现错误，通常需要给用户一个错误提示。在 Vue.js 中，可以使用 v-if 指令来控制错误提示的显示和隐藏。
下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
---- ------------ ---------------- ----- --------
----
--- ----------- -- --------- ---- -------
-----
------- ------------------------ -------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -----
------ ---
--
--
-------- -
----- ----------- -
---------- - -----
--- -
----- -------- - ----- -------------------
-- -------------- -
----- --- ---------------------------
-
----- ---- - ----- ----------------
---------- - -----------
- ----- ------- -
---------------------
---------- - ------- -- ----- ------
-
--
--
--
---------
-------
------ -
------ ----
-
--------在上面的示例代码中，我们使用了一个 error 变量来控制错误提示的显示和隐藏。在 fetchData 方法中，我们首先将 error 变量设置为 null，表示没有错误；然后通过 fetch 函数发送异步请求，如果返回的 response.ok 属性为 false，表示请求失败，我们就抛出一个错误，并将 error 变量设置为 'Failed to fetch data'，表示显示错误提示。如果请求成功，我们就将数据赋值给 items 变量，并将 error 变量设置为 null，表示隐藏错误提示。
总结
在本文中，我们介绍了如何使用 Vue.js 实现异步请求时的 Loading 动画和错误提示。通过本文的学习，我们可以更好地提升用户体验，让用户获得更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510251395b1f8cacd8c1e36