前言
当我们在前端应用中需要做到异步数据传输或者消息队列的实现时，我们往往会考虑到使用基于浏览器端的 WebSocket，而 @buttercup/channel-queue 则是一款针对消息传输和管理的 Channel 管理库。
简介
@buttercup/channel-queue 提供了一种可以异步发送消息的解决方案，可以让前端应用与服务端之间的异步通信变得更加简单。它提供了以下几个核心功能：
- 通过
Channel实现异步借口协议 - 通过
Queue对消息进行排队处理 - 可以设置超时时间，当消息超时时可以发送超时通知
- 可以设置通知订阅的方式，让消息的监听实现更加便捷
- 提供多种事件监听和错误处理方式
安装
在使用 @buttercup/channel-queue 之前，你需要先进行安装。@buttercup/channel-queue 提供了全局 CDN 的支持，也提供了 npm 的方式：
npm install --save @buttercup/channel-queue
如果你是在浏览器中使用它，可以使用 unpkg 的方式
<script src="https://unpkg.com/@buttercup/channel-queue"></script>
使用
创建 Channel
Channel 是异步通信的基础，用来创建异步消息通道，让消息的发送方和接受方之间可以异步交互。
import {Channel} from "@buttercup/channel-queue";
const channel = new Channel();进行消息传输
Channel 用来进行消息传输，可以通过 Channel#send 方法来发送消息。
channel.send({type: "xxx", data: "xxxxx"})添加消息监听器
如果你希望监听消息，可以使用 Channel#addListener 方法来注册相应的监听器：
channel.addListener("message", (message) => {
// 处理接收到的消息
});一个完整的栗子
-- -------------------- ---- -------
------ --------- ---- ---------------------------
------ -- ---- -------------------
----- ------- - --- ----------
----- ------ - ----------------------------
-- --------------
-------------------- --------- -- -
----------------------
---
-- ---------
------------------------------ --------- -- -
------------------- -------------
---
-- ----
------------------- -------- --------- ----------- --------- ------------总结
通过使用 @buttercup/channel-queue，我们可以实现浏览器端的消息队列传输，让浏览器端处理异步消息变得更加方便。同时，由于它的灵活可定制性，我们可以更好地掌握不同场景下消息传输的处理方式。这样就可以更好的为我们的业务开发提供便利，让我们的代码变得更加优雅高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbbf3b5cbfe1ea06119b7