多次点击按钮,需要每次都获请求数据,(promise版的防抖)如何使数据获取的请求只发送一次?

59 阅读1分钟
/** 每次请求累加 1 */
let sum = 0

/** 请求 */
function request() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(++sum)
        }, 2000)
    })
}


/** 正在执行的函数的 promise */
let executePromise = null
/** 是否正在执行 */
let isExecute = false

/** 按钮A 的回调 */
async function clickA() {

    if (isExecute) {
        let res = await executePromise
        console.log('ture', res);
        return
    }

    /** 需要执行的promise */
    let innerExecutePromise = new Promise(async (resolve, reject) => {
        try {
            isExecute = true
            let res = await request()
            resolve(res)
            isExecute = false
        } catch (error) {
            reject(error)
        }

    })
    /** 记录执行的promise */
    executePromise = innerExecutePromise
    let res = await innerExecutePromise
    console.log('false', res);
}

ai优化的封装函数

/**
 * 
 * @param {function():promise} asyncFunction 
 * @returns 
 */
export function singleExecutionTask(asyncFunction) {

    let taskPromise = null;

    return async function () {
        if (!taskPromise) {
            taskPromise = asyncFunction();

            taskPromise.finally(() => {
                taskPromise = null;
            })
        }

        return taskPromise;
    }

}