背景前提

不管是使用 axios 还是类似 umi-request 进行网络请求，在实际开发中，我们都需要对请求异常进行处理，eg. 请求超时、网络错误等。

针对不同类型的异常，可以采取不同的措施，eg. 弹出消息提示、跳转到错误页面、重新请求等。

引言

目前 vue 组件的主流开发风格是基于 ts setup 语法的 composition api，composition api 相对于 options api 来说，更加灵活，代码更加简洁。

由于历史原因，仍有很多项目技术栈使用的是 vue2。本篇文章也旨在介绍 vue-ts-decorator 类组件装饰器的使用和优化。

了解更多

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义.

自定义指令： https://vuejs.org/guide/reusability/custom-directives.html

下面是在 vue 中可能用到的一些自定义指令实现：

What？

SSE又称Server-Sent-Events，是一种基于 HTTP 的单向通信协议，允许服务器向客户端发送异步事件流。它是 HTML5 规范的一部分，通过常规的 HTTP 连接（使用”长轮询”技术）从服务器向客户端推送数据。SSE 不需要额外的协议切换，因为它构建在现有的 HTTP 协议之上。

WebSocket 是一种全双工通信协议，允许在单个 TCP 连接上进行双向通信。它提供了一个持久化的连接，可以在客户端和服务器之间实时地双向传输数据，而不需要像 HTTP 请求那样频繁地创建和关闭连接。

Before?

在学习这篇文章之前，请先了解如何在 vscode 中调试一个 Node 程序，学会基础的调试参数配置和调试技能。详细请参考：在 VScode 中调试 NodeJS 程序

在此基础上，学习如何在 vscode 本地调试远程运行中的 Node 程序。

代码调试在开发工程中必不可少.

通常情况下我们会通过 Chrome 开发者工具在浏览器里进行调试，或者在代码里写入 console 语句打印输出观察变更。除此之外呢，就是在开发工具中对源代码断点调试。

本篇文章就以 nodejs 为例，介绍在 vscode 中调试代码的操作方法，具体参数配置可参考 官方文档

Why?

级联选择组件在UI库中很常见，几乎所有的UI库都支持。但是你会发现几乎所有用于 PC 端的 Cascade 组件都支持对选项多选和搜索，而 Mobile 端的 Cascade 组件，更多的是以 picker 的形式仅支持单选。

局限性大，同时在部分业务场景下，例如表单组件，在 PC 和 Mobile 端的不同呈现兼容，需要我们不得不支持多选这一要求…

如果使用传统的 picker 形式，那么在交互上它不可能实现多选操作，此外如果级联层级过深甚至无法在手机端友好展示，所以我另辟蹊径，参考了目前部分Mobile-UI 库对“地址选择器”的交互效果，即：通过 tab 渲染不同层级实现选项选择。🤨🤨🤨