在我们进行 Vue 项目开发时，经常会用到异步请求来获取数据，而 Promise 是一种在前端开发中经常用到的处理异步请求方式。但是，如果不正确地使用 Promise，就很容易出现一些问题，比如请求失败后不会有任何提示或处理等。本文将介绍如何在 Vue 中使用 Promise 处理异步请求，以及如何在请求失败时给出提示或按照需求处理。
创建 Promise 模块
首先，在 Vue 项目中创建一个新的 Promise 模块。这个模块将处理所有的异步请求，并根据请求的结果返回 Resolve 或 Reject。以下是一个示例代码：
-- -------------------- ---- -------
-- ------------
------ ------- -
-------- -
------ --- ----------------- ------- -- -
----- --- - --- ----------------
--------------- ---- -----
---------------------- - ---------- -
-- ---------------- --- - -- ----------- --- ---- -
--------------------------
- ---- -- ---------------- --- - -- ----------- --- ---- -
-----------------------
-
-
----------
--
-
-以上代码中，我们导出了一个js模块文件，原因是我们需要在Vue组件中调用该模块中的函数。在get函数中，我们使用了 XMLHttpRequest 对象来发送一个 GET 请求。如果请求成功，我们就在 resolve 中返回请求的结果（即 this.responseText）。如果请求失败，我们在 reject 中返回状态码。
在 Vue 组件中使用
现在，我们可以在 Vue 组件中调用我们创建的 Promise 模块。以下是一个例子：
-- -------------------- ---- -------
----------
-----
---- -------------- -- --------
------ ---------- -------
----- --------- ------
------
---- -------------------------------
---- -------------- -- --------- ----- --------
------
-----------
--------
------ --------- ---- -------------
------ ------- -
------ -
------ -
-------- ------
------- ------
----- ---
------ --
-
--
--------- -
------------ - ----
-------------------------------------------------------------
------------ -- -
--------- - ------------------
------------ - -----
----------- - ----
--
------------ -- -
---------- - -----
------------ - -----
--
-
-
---------在上面的代码中，我们导入了我们在之前创建的 Promise 模块。在 Vue 实例中，我们使用 data 属性来创建一些变量来存储异步请求的数据。我们用 mounted 生命周期钩子来进行异步请求，以避免在页面渲染之前就执行请求。在异步请求中，我们使用我们所创建的 Promise 模块的 get 函数。如果请求成功，我们就将结果存储在 data 变量中，并将 loading 和 loaded 变量设置为相应的值。如果请求失败，我们就将错误信息存储在 error 变量中，然后将 loading 变量设置为 false。
错误处理
以上代码中，我们演示了如何在请求失败时返回错误信息并停止异步请求。但是，在某些情况下，我们需要更精细的错误处理。例如，请求可能会重复发送，或者用户可能会关闭页面，而请求将被取消。在这种情况下，我们需要取消请求，并做一些清理工作，以确保我们不会造成资源的浪费或错误的请求。
以下是一个更佳的示例，展示了如何在请求错误时以更好的方式处理：
-- -------------------- ---- -------
-- ------------
------ ------- -
-------- ------------ -
----- --- - --- ----------------
----- ------- - --- ----------------- ------- -- -
--------------- ---- -----
---------- - ---------- -
--------------------------
-
----------- - ---------- -
---------- -----------------------
-
----------
--
-- ------------- -
------------------------------- -- -
-----------
--------------
--
-
------ -------
-
-我们给 get 函数添加了一个可选的第二个参数：cancelToken。这个参数是一个 Promise，如果这个 Promise 被 resolve，请求就会被中止。对于上述问题的解决方案，我们可以使用这个 cancelToken。如果你正在使用 Vue，你可以使用 vue-axios 来实现这个效果。
-- -------------------- ---- -------
-- ---------------
----------
-----
---- -------------- -- --------
------ ---------- -------
----- --------- ------
------
---- -------------------------------
---- -------------- -- --------- ----- --------
------
-----------
--------
------ --------- ---- -------------
------ ----- ---- -------
------ -------- ---- -----------
------ ------- -
------ -
------ -
-------- ------
------- ------
----- ---
------ --
-
--
--------- -
------------ - ----
----- ----------- - -----------------
----- ------ - --------------------
---------------- - ------
-------------------------------------------------------------
- ------------ ------------ --
------------ -- -
--------- - ------------------
------------ - -----
----------- - ----
--
------------ -- -
---------- - -----
------------ - -----
--
--
--------------- -
-- ------------------ -
---------------------------------- -----------
-
-
-
---------
----------------- ------在上面的 script 中，我们导入了 axios 和 vue-axios，并使用它创建了 CancelToken。然后在 get 函数中添加了 cancelToken 参数，取消请求的时候调用 abort() 函数。在vue组件中，我们使用 vue-axios 来获取 cancelToken，并将其传递给我们的自定义 Promise 模块中的 get 函数。同时，我们还在 beforeDestroy 生命周期中取消了cancelToken，以确保在组件销毁时停止发送请求。
结论
在 Vue 项目中，我们可以使用 Promise 处理异步请求，并实现更有效、更安全的错误处理。我们可以创建自己的 Promise 模块，然后在组件中调用。除此以外，在 Vue 的生命周期函数中，我们也可以通过 vue-axios 库使用 cancelToken 对请求进行控制和取消。在项目中使用 Promise，将会大大提高编码的效率和快速开发响应式应用的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bde1ad657e1f70dc22754