当不断点击时，我想请求列队等候，按秩序嘛，这么挤没幸福

• 用户第一次点击触发的时候，api 正常请求
• 当用户连续点击的时候，只要前一次 api 还在pending ,那此次的点击触发操作，就会排队等待

// 点击调用，模拟不断点击，不断调用API
<button onClick={() => clickMe()}> 在逐流中赢合 </button>

// 由于 etEmapData 这个接口很快，我特意用setTimeout 2秒 来延迟
new Promise(function (resolve) {
      setTimeout(() => {
        let a = etEmapData({current: 1,pageSize: 10})
        resolve(a)
       }, 2000)
    })
    
// 正常的话，其实不要 setTimeout 模拟。只是当前 analysis 接口够慢，哈哈……
new Promise(function (resolve) { 
    let a = analysis({
      end_time: moment().add(-1, 'days').format('YYYY-MM-DD'),
      start_time: moment().add(-1, 'days').format('YYYY-MM-DD'),
    })
    resolve(a)
})

CustomHook 版本

export const useAsync = (service, params) => {
    let queue = [];
    let running = false;
    let syncCount = 1;
    const [result, setResult] = useState([]);

    const clickMe = () => {
        addQueue(() => request());
    }
    const request = () => {
        return new Promise((resolve) => {
            let a = service(params);
            resolve(a)
        })
    }
    const addQueue = (item) => {
        queue.push(item);
        if (queue.length > 0 && !running) {
            running = true
            processMulti(syncCount)
        }
    }
    const processMulti = (count) => {
        const arr = []  
        for (let i = 0; i < count; i++) {
          const item = queue.shift()
          item && arr.push(item())
        }
        if(arr.length > 0) {
          Promise.all(arr).then(res => {
            setResult(res);
            processMulti(count)
          })
        } else {
          running = false
        }
    }   

    return {
        result,
        clickMe
    }
} 

// 调用时刻
const { result, clickMe } = useAsync(ldrAnalysis, {
    end_time: moment().add(-1, 'days').format('YYYY-MM-DD'),
    start_time: moment().add(-1, 'days').format('YYYY-MM-DD'),
})
<button onClick={() => clickMe()}>在逐流中赢合</button>

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习