1、需求背景
使用异步操作（promise）或者多个循环时，遇到不能及时中断操作，回收资源时
2、代码
/**
* 创建一个可中断的异步任务执行函数。
* @param {function} taskFunction - 要执行的异步任务函数，接受一个 AbortSignal 参数用于中断。
* @returns {object} 包含执行任务和中断任务的函数的对象。
*/
function createAbortFunction(taskFunction) {
let abortController = null; // 用于控制任务的中断
let signal = null; // 用于传递给任务函数的 AbortSignal
/**
* 执行异步任务
* @param {...any} args - 传递给任务函数的参数
* @returns {Promise} 异步任务的结果
*/
async function execute(...args) {
abortController = new AbortController(); // 创建一个新的 AbortController
signal = abortController.signal; // 获取与控制器相关的 AbortSignal
try {
return await taskFunction(...args, signal); // 执行任务函数并传递 AbortSignal
} catch (error) {
if (signal.aborted) {
const msg = {
fn: taskFunction,
...signal.reason,
};
console.log('任务主动中断', msg);
throw error;
} else {
console.error('其他错误处理:', error); // 如果出现其他错误，记录错误信息并抛出错误
throw error;
}
}
}
/**
* 中断当前执行的任务
*/
function abort(reason = '主动中断') {
if (abortController) {
abortController.abort({
mas: reason,
type: 'ABORT_ACTION',
});
}
}
return { execute, abort }; // 返回包含执行任务和中断任务函数的对象
}
2、使用案例
导入
// 导入 createAbortFunction
import { createAbortFunction } from './your-abort-function-module';
// 模拟一个异步任务函数，接受 AbortSignal 并在中断时抛出 AbortError
async function exampleTask(params1, params2, signal) {
let arr = [];
for (let i = 0; i < 5; i++) {
await new Promise(resolve => setTimeout(resolve, 1000));
// 注意！！！！！必须添加中断标记
if (signal.aborted) {
throw signal;
}
console.log('params2 -->', params2, 'params1 -->', params1, 'i -->', i);
arr.push(i);
}
return arr;
}
// 使用 createAbortFunction 创建可中断任务执行器
const { execute, abort } = createAbortFunction(exampleTask);
(async () => {
try {
console.log('任务开始执行...');
const result = await execute('aa', 'bb');
console.log('任务完成:', result);
} catch (error) {
console.error('任务失败:', error);
}
})();
// 在需要中断任务的地方调用
setTimeout(() => {
// 可传一个中断原因
abort('用户主动中断');
}, 2500);
3、最终结果
对于业务中长请求或者多个异步请求存在前后关联的场景下，可以有效的控制顺序以及执行过程