在前端开发中，我们往往需要向服务器发送异步请求去获取数据，但是一些复杂的业务场景，如批处理、分布式计算等，可能需要在服务器上执行一些耗时较长的任务，同时客户端又需要不断地查询任务进度和结果。为了解决这类问题，我们可以使用 npm 包 long-api-task-requester。
什么是 long-api-task-requester
long-api-task-requester 是一个简单易用的 npm 包，用于在客户端发起长时间运行的 API 请求，并实时获取任务进度和结果。它基于 Ajax 和 Promise 技术实现，可以适用于各种前端框架和项目。
如何使用 long-api-task-requester
首先，你需要在项目中安装 long-api-task-requester。可以通过 npm 命令行工具安装：
npm install long-api-task-requester --save
使用 long-api-task-requester 来发起一个任务，可以按照下面的步骤进行：
- 在服务器端定义一个处理函数，该函数必须返回一个全局唯一的任务 ID 和运行状态（如 RUNNING、 PENDING、 SUCCESS、 FAILED）立即响应客户端请求。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--- ------ - -- -- ---
--------------------- ----- ---- -- -
---------
----------
-------
------- ----------
---
-- ----- -----------------------
---
------------------------- ----- ---- -- -
-- -----------------
----- - ------ - - ----------
----- ---- - -------------------- -- -----------
---------------
---- 在客户端中调用 long-api-task-requester，首先实例化请求对象 TaskRequester，然后使用它的方法 startTask() 来发起任务。startTask() 方法的参数包括：
- URL：调用服务器端的接口 URL
- data：向服务器传递的参数
- options：Ajax 请求的选项配置，包括 method、headers、timeout 等
- pollingInterval：轮询频率，每隔多长时间轮询一次任务状态，默认为 3s；
- onSuccess：任务成功时的回调函数
- onProgress：任务进度变化时的回调函数，可以通过该函数获取当前进度百分比
- onError：任务失败时的回调函数
-- -------------------- ---- -------
------ ------------- ---- --------------------------
----- ------------- - --- ----------------
-------------------------
---- -------------
----- - ----- ------- ---- -- --
---------- ------ -- -
----------------- -- ------------ --------
--
----------- ------- -- -
----------------- -- ----------- ------------
--
-------- ----- -- -
------------------- --------- -------
--
---- 调用 TaskRequester 的 getTaskStatus() 方法来获取任务运行状态和结果，该方法需要传递一个 taskId 参数，表示要获取哪个任务的状态。
const taskStatus = taskRequester.getTaskStatus(taskId);
console.log('Task status:', taskStatus.status);
console.log('Task result:', taskStatus.result);示例代码
以下是通过 long-api-task-requester 发起任务的完整示例代码：
-- -------------------- ---- -------
------ ------------- ---- --------------------------
----- ------------- - --- ----------------
----- -------- - --- ---- ------- ------
----- ---------- - - ----- ------- ---- -- --
-------------------------
---- -------------
----- - --------- ---------- --
---------- ------ -- -
----------------- -- ------------ --------
--
----------- ------- -- -
----------------- -- ----------- ------------
--
-------- ----- -- -
------------------- --------- -------
--
---
-- -- - ----------
-------------- -- -
----- ---------- - ------------------------------------
----------------- --------- -------------------
----------------- --------- -------------------
-- ------指导意义
使用 long-api-task-requester 可以让我们更加方便地处理长时间运行的 API 请求，避免了客户端频繁请求服务器的问题。同时，我们可以通过轮询方式实时获取任务进度和结果，给用户带来更好的体验。此外，由于 long-api-task-requester 是基于 Ajax 和 Promise 实现的，所以可以与各种前端框架和项目无缝集成，非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f4d9381d61a3540e6c