JavaScript 实现一个 Promise 队列小工具

摘要

根据定义，队列是一种特殊的线性表，其特殊性在于仅允许在表的前端进行删除操作，而在表的后端进行插入操作。与栈类似，队列也是一种操作受限的线性数据结构。执行插入操作的端点被称为队尾，而执行删除操作的端点则被称为队头。

受队列结构的启发，在前端开发的各种业务场景中，当一次性发起的异步请求过多，且这些服务分散在不同组件或不同的兄弟功能模块之间时，直接对这些方法进行同步处理变得困难。因此，引入队列概念来处理这些并发问题，实现顺序处理显得尤为必要。

思考

为什么要写一个类似于队列的功能？

我们知道，在主流的V8引擎中，JavaScript 的执行顺序都是至上而下的，引入了 ajax 之后我们能够对网页进行局部刷新，在前端领域第一次有了异步操作的概念。自此，当我们接触 Promise 之后也不在陌生于这种模式。当然，使用过 Promise 的都知道，如果是在某个单一的 js 文件中，我们完全可以通过编写一个 async 函数，通过使用 await 去实现将 Promise 函数按顺序执行的功能。

那么这个队列小工具是否毫无意义？作者是否像“大渣男”一样玩弄感情后轻飘飘地离开？当然不是。众所周知，在单一文件中，我们总有办法控制异步操作。然而，问题在于如何在不同的模块和组件之间实现这种操作？按照这一思路，单纯地编写代码无法直接解决异步功能同时触发的问题，这正是作者开发此类队列功能的原因。

Promise 队列功能的思路在哪里？

首先，我们需要明确所需的功能。作者绘制了大概的功能流程图：不同组件的异步请求是同时发生的，我们需要在请求发生前将 Promise 函数放入队列工具中，再由队列工具调度入栈和出栈的顺序。每次出栈时，再调用 Promise 函数发起请求。

我们可以在 js 文件中使用单例模式，主要记录入栈顺序并对操作进行加锁，同时启动一个定时服务定期检测栈中是否还有剩余任务。思路虽然简单，但需要立即付诸实践。

实现

我们新建一个 useQueue.js 文件，以便后续引用。首先，我们需要定义三个关键变量：

var queue = []
var locks = false
var timer = null

• queue：记录入栈的 Promise 任务函数
• locks：在处理出栈任务时，我们需要对函数进行加锁，防止多次出栈
• timer：防抖记录，与功能 locks 主要起到保险作用，防止出栈时重复调用函数

我们定义两个函数 hander、useQueue，并导出默认函数 useQueue。

/**
 * 处理任务出栈
 */
const hander = () => {}

/**
 * 入栈等待排队操作
 * @param {Promise} task
 */
const useQueue = (task) => {}

/**
 * 导出
 */
export default useQueue

当有任务进入时，启用 useQueue 函数，将任务放入栈中，并设置 locks = true 进行解锁。

const useQueue = (task) => {
  queue.push(task)
  locks = true
}

此时，我们在单例上设置一个心跳机制，定期检测加锁状态。如果处于解锁状态，则触发处理函数。

// 心跳
setInterval(() => {
  locks && handler()
}, 100)

当函数 hander 被成功触发，我们需要设置一个延时器来处理防抖。先进行加锁，然后在队列中进行出栈操作。如果出栈为空，则解锁；如果出栈不为空，则调用任务，并等待任务结束后进入下一个 hander。

const handler = () => {
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    locks = false
    const task = queue.shift()
    if (task) {
      task().then(handler)
    } else {
      locks = true
    }
  })
}

假设我们已经写了一个 vue 字典标签组件，组件内部会调用远程接口，并将结果记录到某个缓存中。如果一个页面多次使用该组件，而该缓存尚未存在，可能会导致同时触发多个异步网络请求。此时，就可以使用队列工具来解决这一问题。

import useQueue from './useQueue.js'

const handleAjax = () => {
  return new Promise(resolve => {
    ...
    resolve()
  })
}

useQueue(handleAjax)

// 或者可以这样调用
useQueue(async () => {
  await handleAjax()
})

总结

Promise 队列工具实际上是通过延迟触发来处理挂载在某一队列数据上的出栈任务，其原理并不复杂，旨在处理异步请求同时发生的情况。当然，该函数可以有更多的优化方案，例如添加一个优先级参数值，根据不同优先级进行入栈操作，或者增加同类型排异机制等。

到此这篇关于 JavaScript 实现一个 Promise 队列小工具的文章就介绍到这了，更多相关 JS Promise 队列内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！