随着前端技术的不断发展，JavaScript 语言也在不断地更新和完善。其中，ES2017 和 ES2018 中新增了一些进程状态保存的方法，为前端开发者提供了更多的选择。本文将详细介绍这些新特性，并提供示例代码和指导意义。
ES2017 中的进程状态保存方法
在 ES2017 中，新增了 async/await 关键字，它们可以让我们更方便地处理异步操作。同时，ES2017 还新增了 for await...of 循环语句，用于遍历异步操作的结果。
我们可以利用这些新特性来实现进程状态保存。具体来说，我们可以把需要保存的状态存储在一个对象中，然后在异步操作完成后将其保存到本地存储或服务器端。
下面是一个示例代码：
-- -------------------- ---- ------- ----- -------- ------------------ - --- ----- - --- ----------- - ----- ---------- ----------- - ----- ---------- ----------- - ----- ---------- ------------------------------------ ----------------------- - ----- -------- --------------------- - --- ----- - ------------------------------------------------- ----- --------------------- ----- --------------------- ----- --------------------- -
在上面的代码中，我们定义了 saveProcessState 和 restoreProcessState 两个函数。saveProcessState 函数用于保存进程状态，它会依次执行三个异步操作，将它们的结果保存在一个对象 state 中。最后，我们将 state 对象转换成 JSON 字符串，并存储到本地存储中。
restoreProcessState 函数用于恢复进程状态，它会从本地存储中读取之前保存的状态，并依次执行三个异步操作，将保存的状态传递给它们。
需要注意的是，上面的代码只是一个示例，实际应用中我们需要根据具体情况来选择存储方式和存储位置。
ES2018 中的进程状态保存方法
在 ES2018 中，新增了 Promise.prototype.finally() 方法，它可以让我们更方便地处理异步操作的结束状态。同时，ES2018 还新增了 async 函数的返回值类型 Promise<T>，用于指定异步操作的返回类型。
我们可以利用这些新特性来进一步完善进程状态保存。具体来说，我们可以在异步操作完成或出错时，利用 finally() 方法来保存进程状态。
下面是一个示例代码：
-- -------------------- ---- -------
----- -------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
-----------------
-- ------
---
-
----- -------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
------------- ---------
-- ------
---
-
----- -------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
-----------------
-- ------
---
-
----- -------- ------------------ -
--- ----- - ---
--- -
----------- - ----- ----------
----------- - ----- ----------
----------- - ----- ----------
- ----- ----- -
----------- - ----
- ------- -
------------------------------------ -----------------------
-
-
----- -------- --------------------- -
--- ----- - -------------------------------------------------
-- ------------- -
-------------------- ------- ----- --------- -------------
-------
-
--- -
----- ---------------------
----- ---------------------
----- ---------------------
- ----- ----- -
-------------------- ------- ----- --------- -----
-
-在上面的代码中，我们定义了 doStep1、doStep2 和 doStep3 三个异步操作，它们分别模拟了三个步骤。doStep2 操作会故意抛出一个错误，用于测试异常情况。
在 saveProcessState 函数中，我们使用 try...catch...finally 语句块来处理异步操作的结果。如果其中任何一个操作抛出了错误，我们会将错误信息保存在 state.error 中。无论是否出错，最后我们都会将 state 对象转换成 JSON 字符串，并存储到本地存储中。
在 restoreProcessState 函数中，我们首先从本地存储中读取之前保存的状态。如果 state.error 不为空，说明之前保存状态时出错了，我们直接输出错误信息并返回。否则，我们依次执行三个异步操作，将保存的状态传递给它们。如果其中任何一个操作抛出了错误，我们会将错误信息输出到控制台。
指导意义
通过本文的介绍，我们可以发现，在 ES2017 和 ES2018 中，JavaScript 语言新增了一些进程状态保存的方法，它们可以让我们更方便地处理异步操作和异常情况。但是，在实际应用中，我们需要根据具体情况来选择合适的存储方式和存储位置，同时也需要注意保存的状态是否包含敏感信息。
除此之外，还有一些其他的进程状态保存方法，例如使用 Web Worker 或 Service Worker 来处理长时间运行的任务，使用 IndexedDB 或 Web SQL 数据库来保存状态等等。前端开发者需要根据具体情况来选择合适的方法，并在开发过程中不断学习和探索新的技术，以提高自己的技能水平。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67967861504e4ea9bdd3b3e6