前言
在前端开发过程中，异步操作非常常见。但是如何保持代码干净、可维护，同时又要统一返回异步操作的结果呢？这时候就可以使用一个 npm 包 @shopify/async。
@shopify/async 是 Shopify 公司所提供的一个异步请求库，可以让你更加方便的编写异步代码。下面就来详细介绍一下这个库的使用方法。
安装
使用 npm 安装：
npm install @shopify/async
使用
1. 接收异步操作的返回结果
@shopify/async 提供了一个 Async 类和一个 createAsync 工厂方法。我们可以通过以下方式来使用：
-- -------------------- ---- -------
-- ----
----- ------- ------------ - --------------------------
-- --------
-------- ------------- -
------ --- ----------------- ------- -- -
------------- -- -
---------
---
----- ------------
---
-- ------
---
-
-- -- ----- -
----- ----- - --- --------
--------------------- -- -
---------------------- -- -
------------------
---
---上面的代码中，我们引入了 Async 类，并且创建了一个 async 实例。Async 这个类提供了一个 ready 方法，返回一个 Promise。只有在这个 Promise resolve 后，才可以执行所有异步操作。
在 ready 方法的返回 Promise resolve 后，我们通过 then 方法执行异步操作。在上面的例子中，我们调用了 fetchUser 函数，并在 then 中获取异步操作的返回结果。
2. 并行执行多个异步操作
如果我们需要同时执行多个异步操作，并且需要等待所有操作都完成后，再进行下一步操作，可以使用 createAsync 工厂方法。
-- -------------------- ---- -------
-- ----
----- ------------- - --------------------------
-- ---------
-------- ------------- -
------ --- ----------------- ------- -- -
------------- -- -
---------
---
----- ------------
---
-- ------
---
-
-- ---------
-------- ---------------- -
------ --- ----------------- ------- -- -
------------- -- -
---------
---
------ ---------------
---
-- ------
---
-
-- -- ----------- --
----- ----- - --------------
----------------
----------- ---
-------------- ---
--------------- --------- -- -
----------------- ---------
---上面的代码中，我们使用了 createAsync 方法创建了一个 async 实例，并且调用了它的 sequence 方法来执行两个异步操作。sequence 方法接收一个数组，数组中的每一个元素都是一个函数和函数的参数。函数可以是任意形式的函数，只要它的返回值是 Promise 就可以。
在上面的例子中，我们执行了 fetchUser 和 fetchProduct 这两个异步函数，这两个函数的返回值都是一个 Promise。在 sequence 方法 resolve 时，会返回一个包含所有异步操作结果的数组。
总结
通过使用 @shopify/async 包，我们可以更加方便的编写异步操作的代码，并且可以保持代码的干净和可维护性。在实际开发的过程中，我们可以灵活使用 Async 类和 createAsync 工厂方法，来达到我们想要的异步操作效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeda8bfcb6ebf1c9ec1f3e2