

## 什么是低代码

这玩意儿主要是为了能减少页面开发成本, 可以让不懂代码或者懂一点代码的人也能通过这样的平台产出一些功能页面, 或者是为了快速生成一些简单的页面, 比如一个表单页面, 或者一个列表页面

## 为什么做低代码

## 怎么做低代码


低代码解析



## 前言

**官方介绍如下:**
ByteMD 是一个使用 Svelte 构建的 Markdown 编辑器组件. 它也可以在其他库/框架中使用

**特性如下:**

- 轻量级且与框架无关

- 易于扩展

- 默认安全

- 兼容 SSR

因此本文介绍一下基本用法, 跟着这篇文章你能搭建出一个掘金同款md编辑器

## 基本使用

### 安装

```bash
pnpm add bytemd
```

### 用法

bytemd有两个组件: `Editor` 和 `Viewer` .
`Editor` 顾名思义，是 Markdown 编辑器; `Viewer` 通常用于显示渲染的 Markdown 结果而无需编辑.
在使用组件之前，记得导入CSS文件以确保样式正确:

```js
import "bytemd/dist/index.css";
```

### 使用示例

```tsx
import { Editor, Viewer } from "@bytemd/react";
import zhHans from "bytemd/locales/zh_Hans.json";
import "bytemd/dist/index.min.css";
import "highlight.js/styles/atom-one-dark.min.css";

const plugins = [];

type Props = {
  onlyRead?: boolean;
  defaultValue?: string;
  onChange?: (e: string) => void;
};

const EditorMD:FC<Props> = ({ onlyRead, defaultValue, onChange }) => {
	const [value, setValue] = useState(() => defaultValue || "");

  useEffect(() => {
    setValue(defaultValue || "");
  }, [defaultValue]);

  const onValueChange = (e: string) => {
    setValue(e);
    onChange && onChange(e);
  };

  return (
    {onlyRead ? (
      <Viewer plugins={plugins} value={value} />
    ) : (
      <Editor
        locale={zhHans}
        plugins={plugins}
        value={value}
        onChange={onValueChange}
      />
    )}
  )
}
```

### 风格定制

**编辑器**

ByteMD Editor 默认高度为 `300px` . 可以使用 CSS 进行覆盖:

```css
.bytemd {
	height: calc(100vh - 200px);
}
```

**渲染器**

ByteMD Viewer 默认没有内置样式, 可以使用第三方 markdown 主题
这里选择**juejin**样式, 我选择将样式文件直接down下来放本地, 样式地址https://github.com/xitu/juejin-markdown-theme-default
使用 `atom-one-dark` 作为代码样式, 使用如下

```js
import "highlight.js/styles/atom-one-dark.min.css";
```

## 插件配置

### 安装插件

官方插件列表如下:

| 插件名称                                                                                                    | 插件备注                                                             |
| ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| [@bytemd/plugin-breaks](https://github.com/bytedance/bytemd/tree/main/packages/plugin-breaks)               | 默认md渲染时硬换行需要双空格或者双回车, 该插件确保正常回车即可硬换行 |
| [@bytemd/plugin-frontmatter](https://github.com/bytedance/bytemd/tree/main/packages/plugin-frontmatter)     | 解析元数据                                                           |
| [@bytemd/plugin-gemoji](https://github.com/bytedance/bytemd/tree/main/packages/plugin-gemoji)               | 解析gemoji表情                                                       |
| [@bytemd/plugin-gfm](https://github.com/bytedance/bytemd/tree/main/packages/plugin-gfm)                     | 支持GFM(自动链接文字、删除、表格、任务列表)                          |
| [@bytemd/plugin-highlight](https://github.com/bytedance/bytemd/tree/main/packages/plugin-highlight)         | 代码高亮                                                             |
| [@bytemd/plugin-highlight-ssr](https://github.com/bytedance/bytemd/tree/main/packages/plugin-highlight-ssr) | 代码高亮ssr版本                                                      |
| [@bytemd/plugin-math](https://github.com/bytedance/bytemd/tree/main/packages/plugin-math)                   | 支持数学公式                                                         |
| [@bytemd/plugin-math-ssr](https://github.com/bytedance/bytemd/tree/main/packages/plugin-math-ssr)           | 支持数学公式ssr版本                                                  |
| [@bytemd/plugin-medium-zoom](https://github.com/bytedance/bytemd/tree/main/packages/plugin-medium-zoom)     | 支持点击图片放大预览                                                 |
| [@bytemd/plugin-mermaid](https://github.com/bytedance/bytemd/tree/main/packages/plugin-mermaid)             | 支持流程图                                                           |

### 自定义插件

**官方文档提示如下:**

ByteMD 使用 [remark](https://github.com/remarkjs/remark) 和 [rehype](https://github.com/rehypejs/rehype) 生态系统来处理 Markdown. 完整流程如下:

1. Markdown 文本被解析为[AST](https://github.com/syntax-tree/mdast)
2. Markdown AST 可以通过多种[注释插件进行操作](https://github.com/remarkjs/remark/blob/main/doc/plugins.md)
3. Markdown AST 转换为 HTML AST
4. 出于安全原因，HTML AST 已被清理
5. HTML AST 可以被多个[rehype 插件操纵](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md)
6. HTML AST 被字符串化为 HTML
7. HTML 渲染后的一些额外 DOM 操作

它也可以描述为流程图:
![](/images/bytemd-use/flowchart.png)

2、5、7步骤是通过ByteMD插件API进行用户定制的.

官方文档以 `plugin-math` 作为例子解释了如何编写插件

这里我再补充几个插件:

#### 添加锚点插件

需要给md加上目录，且支持锚点跳转，因此需要做两件事情

1. 给标题添加id
2. 解析md文档提出目录列表，再自定义渲染成目录

因为bytemd底层用的是remark、rehype，因此查找rehype插件，这里用到的是[ `rehype-slug` ](https://github.com/rehypejs/rehype-slug)插件, 该插件能获取到所有标题标签并为其添加id

**代码如下:**

```ts
import type { BytemdPlugin } from "bytemd";
import rehypeSlug from "rehype-slug";

const autolinkHeadingsPlugin = (): BytemdPlugin => {
	return {
		rehype: (processor) => processor.use(rehypeSlug),
	};
};
```

上面只是给解析的md做处理, 将md生成的html标签中添加锚点, 还需要渲染出一个目录出来, 点击目录跳转到对应的锚点, 这里使用一个插件 [ `remark-extract-toc` ](https://github.com/inokawa/remark-extract-toc) 去解析获取md文档的目录数据

```ts
import toc from "remark-extract-toc";
import markdown from "remark-parse";
import { unified } from "unified";

const getTocTree = (val: string): TocTree => {
	try {
		const processor = unified().use(markdown, { commonmark: true }).use(toc);
		const node = processor.parse(val);
		const tree = processor.runSync(node);
		return tree as unknown as TocTree;
	} catch (error) {
		return [];
	}
};
```

`getTocTree` 方法会返回一个tree-list, 包含的就是目录数据, 根据这个数据自定义渲染目录即可.

#### 添加copy按钮插件

bytemd默认渲染的出来的就是最简单的html，代码块是解析成 `pre > code` 标签, 因此是不带任何额外功能的，我们希望在代码块的右上角有个copy按钮.

这个事情应当在创建好dom之后处理，因此实在effect生命周期中操作

**代码如下:**

```ts
import type { BytemdPlugin } from "bytemd";

const codeCopyPlugin = (): BytemdPlugin => {
	const createCopyDom = (text: any): HTMLElement => {
		const copyDom = document.createElement("div");
		copyDom.className =
			"icon-[ph--copy-bold] absolute right-2 top-2 cursor-pointer";
		copyDom.addEventListener("click", () => {
			copyToClipboard(text);
			message.info({
				title: "系统通知",
				content: "复制成功",
			});
		});
		return copyDom;
	};

	return {
		viewerEffect: ({ markdownBody }) => {
			// 获取所有code标签
			const els = markdownBody.querySelectorAll("pre>code");
			if (els.length === 0) return;

			// 往pre标签中append copy节点
			els.forEach((itm: HTMLElement) => {
				itm.parentNode.appendChild(createCopyDom(itm.innerText));
			});
		},
	};
};
```

#### 添加代码块行号插件

希望给代码块添加行号功能，找到[ `rehype-highlight-code-lines` ](https://github.com/ipikuka/rehype-highlight-code-lines)

**代码如下:**

```ts
import type { BytemdPlugin } from "bytemd";
import rehypeHighlightCodeLines from "rehype-highlight-code-lines";

const highlightCodeLinesPlugin = (): BytemdPlugin => {
	return {
		rehype: (processor) =>
			processor
				// @ts-ignore
				// 添加代码行号
				.use(rehypeHighlightCodeLines, {
					showLineNumbers: true,
					lineContainerTagName: "div",
				}),
	};
};
```

#### 插件使用

基于上方使用示例中plugins为空数组，使用插件时补充到该数组中即可

```ts
import breaks from "@bytemd/plugin-breaks";
import gemoji from "@bytemd/plugin-gemoji";
import gfm from "@bytemd/plugin-gfm";
import gfmZhHans from "@bytemd/plugin-gfm/locales/zh_Hans.json";
import highlightSSR from "@bytemd/plugin-highlight-ssr";
import mediumZoom from "@bytemd/plugin-medium-zoom";
import {
	autolinkHeadingsPlugin,
	codeCopyPlugin,
	highlightCodeLinesPlugin,
} from "@/bytemd-plugins";

const plugins = [
	breaks(),
	gemoji(),
	gfm({ locale: gfmZhHans }),
	highlightSSR(),
	mediumZoom(),
	autolinkHeadingsPlugin(),
	codeCopyPlugin(),
	highlightCodeLinesPlugin(),
];
```

### Tips

1. 目录中包含特殊字符可能导致锚点跳转失效  
   这里使用的是 `rehype-slug` 给标题添加id, id源于标签内容, 但是id中不能包含特殊字符, 因此需要将特殊字符替换为另一个关键字, 因此最好避免在标题中使用特殊字符

## 链接

[官方文档](https://bytemd.js.org/#options)

[示例代码](https://github.com/hushaha/blog_front/blob/master/src/components/EditorMD/index.tsx)

[博客地址](https://blog.hushaha.top)

[rehype-slug](https://github.com/rehypejs/rehype-slug)

[remark-extract-toc](https://github.com/inokawa/remark-extract-toc)

[rehype-highlight-code-lines](https://github.com/ipikuka/rehype-highlight-code-lines)


bytemd使用



## 什么是竞态

竞态条件, 旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺序或者出现时机. 此词源自于两个信号试着彼此竞争, 来影响谁先输出.

举例来说, 如果计算机中的两个进程同时试图修改一个共享内存的内容, 在没有并发控制的情况下, 最后的结果依赖于两个进程的执行顺序与时机. 而且如果发生了并发访问冲突, 则最后的结果是不正确的.

举个🌰:

分页列表查询, 点击分页按钮进行分页查询, 具体实现逻辑应该如下:

1. 点击分页按钮
2. 设置loading状态, 发送请求
3. 接受数据并渲染, 设置loading状态为false

其中可能出现一个bug, 若快速点击分页按钮, 则会发出多个请求, 假设从当前第1页快速依次点击到第3页, 若第2页比第3页后返回数据, 则会导致当前时第3页, 但是渲染的是第2页的数据

这就是前端对应的竞态问题, 常在同请求快速多次发起时出现

## 解决方案

解决方案很多, 这里大致都介绍一下:

### loading状态

若只是当前页面的多次重复请求, 可以根据loading状态直接解决

```js
const status = {
    loading: false,
    data: [],
};

const fetchData = async () => {
    if (status.loading === true) {
        return false;
    }

    status.loading = true;
    const res = await fetch();
    status.data = res.data;
    status.loading = false;
};
```

这里可以扩展成请求时不允许再次点击按钮

### 取消请求

顾名思义在下一次请求时取消上一次的请求, 让上一个请求不返回数据即可

#### xhr

如果是原生的请求, 可以使用 `abort` 方法取消请求

```js
const xhr = new XMLHttpRequest();

xhr.open("GET", "url");
xhr.send();

xhr.abort(); // 取消请求
```

#### axios

axios是对xhr的封装, 因此内部提供了 `cancelToken` 来取消请求, 具体实现如下:

```js
const source = axios.CancelToken.source();

axios.get(url, {
    cancelToken: source.token;
}).catch(function(thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        // 处理错误
    }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
```

`isCancel` 可以用来判断是否为手动取消的行为

> Axios 的 cancel token API 是基于被撤销 cancelable promises proposal  
> 此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求

```js
const controller = new AbortController();

axios.get(url, {
        signal: controller.signal,
    })
    .then(function(response) {
        //...
    })
    .catch(function(thrown) {
        if (axios.isCancel(thrown)) {
            console.log("Request canceled", thrown.message);
        } else {
            // 处理错误
        }
    });

// 取消请求
controller.abort();
```

axios实则为对xhr封装的promise版本, 因此在cancel时执行了xhr.about() 和 promise.reject()

请求过多时可能会因为浏览器限制而等待发送, 在请求未发送时 cancel 调则后台不会接收到请求, 因此当前方案是叫取消请求

#### 封装示例

```ts
export type RequestConfig = InternalAxiosRequestConfig & {
	isCancel?: boolean;
};

/**
 * 取消请求的函数的缓存Map
 */
const cancelFns = new Map();

// 可以对url做其他处理, 主要生成单个接口类型的唯一值, 取消时会按照接口的唯一值取消
const getCancelToken = (config: RequestConfig): string => {
	return config.url;
};

/** 
 * 缓存取消请求的函数
*/
const setCancelToken = (config: RequestConfig): CancelToken => {
    const key = getCancelToken(config);
    const abort = new AbortController();
    cancelFns.set(key, abort);
	return about;
};

/**
 * 执行取消操作
*/
export const cancelAjax = (
	type: "check" | "remove" | "removeAll",
	key: string,
) => {
	switch (type) {
		// 取消接口
		case "check":
			cancelFns.get(key) && cancelFns.get(key).abort();
			cancelAjax("remove", key);
			break;
		// 缓存中删除接口
		case "remove":
			cancelFns.delete(key);
			break;
		// 取消所有接口
		case "removeAll":
			cancelFns.forEach((fn, k) => {
				fn.abort();
				cancelFns.delete(k);
			});
			break;
		default:
			throw new Error("无效的取消类型");
	}
};

const useAjax = (config?: CreateAxiosDefaults) => {
    const client = axios.create({
		baseURL: config.baseURL,
		headers: config.headers,
	});

    client.interceptors.request.use((config: RequestConfig) => {
        // 设置cancelToken
        const { isCancel } = config;
        config.signal = setCancelToken(config).signal;

        if (isCancel) {
            cancelAjax("check", key);
        }

        return config;
	});

    client.interceptors.response.use(
		(res) => {
			// 接口请求完毕删除队列中的cancelToken
			const key = getCancelToken(res.config);
			if (key) cancelAjax("remove", key);
            return res.data;
		},
	);

    return client;
}

const ajax = useAjax();

ajax.get("/xxx", { isCancel: true })
```

### react18

在波神那里看到一个使用示例, React 18 结合 Suspense 也在竞态问题上, 提出了一个自己的解决方案. 这里做一个引导, 提供一个新思路

需求如下:

点击一个按钮, 调一个接口获取返回值往列表底部插入一条数据, 接口未返回时插入的数据应是loading状态

可能存在的问题:  
若多次点击, 有可能上一次的接口比下一次的返回值后返回, 导致列表顺序出错

下方会用到一些 react 特性 `use` 和 `Suspense` , 在这里先解释一下:

* **use**

use 是一个 React API，它可以让你读取类似于 Promise 或 context 的资源的值。

```js
const getApi = async (url) => {
    const res = await fetch(url);
    return res.json();
};

const data = getApi("xxx");

const value = use(data);
```

* **Suspense**

<Suspense> 允许在子组件完成加载前展示后备方案。

```tsx
<Suspense fallback={<Loading />}>
    <SomeComponent />
</Suspense>
```

下方先简化一下使用示例代码

```tsx
import { use, Suspense, useState } from "react";

const getApi = async () => {
	const res = await fetch("xxx");
	return res.json();
};

export default function Index() {
	const [list, setList] = useState([]);

	function onAddData() {
		list.push(getApi());
		setList([...list]);
	}

	return (
		<div>
			<button onClick={onAddData}>新增数据</button>
			<div className="content">
				<div className="list">
					{list.map((item, index) => (
						<div className="item" key={index}>
							<Suspense fallback={<div>loading...</div>}>
								<Item api={item} />
							</Suspense>
						</div>
					))}
				</div>
			</div>
		</div>
	);
}

const Item = ({ api }) => {
	const joke = api ? use(api) : { value: "nothing" };
	return <div>{joke.value}</div>;
};
```

这里父组件 `Index` 中定义 `list` , 在每次执行 `onAddData` 新增时会往list中 push一个 `promise` 数据, 然后通过这个 `list` 渲染 `Suspense` 包裹的 `Item` 组件并把这个 `promise` 状态的数据传入 `Item`

`Item` 组件中通过 `use` 读取 `api` 的值, 若 `api` 没有值则返回默认值, 若有值则读取 `api` 的值

示例结束, 分析一下:

整体方案就是父组件每次新增数据时是把数据请求的 `promise` 丢给子组件, 渲染子组件时用 `Suspense` 包裹子组件通过 `use` 读取 `api` 的值, 而不是由父组件收集promise数据再丢给子组件去渲染, 这样就已经规避了竞态问题, 不存在所谓的多进程同时更改一个状态的问题

且这是个异步操作, 点击即会发送请求, 即会渲染对应的组件, 不用担心瀑布式渲染的情况

这个方案不针对于 react, 更可以认为是一种思路, 即使不是react, 我们也可以把promise丢给子组件, 封装一个辅助函数用以解析该promise, 再自行渲染数据, loading状态自己维护即可, 上述场景的 `suspense` 在此处并没有必要性, 只是减少自己处理loading状态罢了

## 总结

其实解决方式不止这些，像 React Query，GraphQL，rxjs 等都有竞态处理，感兴趣的同学可以再继续深入了解。

## 相关链接

[React 19 出手解决了异步请求的竞态问题，是好事还是坏事？](https://mp.weixin.qq.com/s/3cHVJkJekEv7k5_QYbMCsw)

[上一个案例，更优雅的解决方案](https://mp.weixin.qq.com/s/Rqajo94tM9U5Fqfwf4vTpg)

[react suspense](https://zh-hans.react.dev/reference/react/Suspense)

[react use](https://zh-hans.react.dev/reference/react/use#streaming-data-from-server-to-client)


如何解决前端竞态问题



## 前言

正常情况下其实没必要封装axios, 他本身就是对xhr的封装, 使用上已经足够方便了, 没必要做过多的处理.

不过工具方便是因为工具做的好, 但你没办法让用的人能写的好代码, 所以需要有一套规范来统一, 统一什么呢. 请求嘛, 无非需要确认好的就是请求的参数和响应的参数, 以及和后端对接的请求结构体

这里我想实现一个功能, 能够配置请求的入参和出参格式, 配合ts在使用时直接可以看到数据结构. 那又有人要问了, 我这样写不就可以了

```ts
interface GetUserRequest {
    id: string;
}

interface GetUserResponse {
    name: string;
    age: number;
}

const getUser = (params: GetUserRequest): GetUserResponse => {
    return request.get('/user')
}
```

这样是实现了, 但是要写很多的重复代码以及类型定义, 那你又要问了, 那我把类型定义写到方法上呢

```ts
interface GetUserRequest {
    id: string;
}

interface GetUserResponse {
    name: string;
    age: number;
}

const getUser = (params: {
     id: string;
}): {
    name: string;
    age: number;
} => {
    return request.get('/user')
}
```

这不是不好看嘛, 而且也不好将类型定义复用, 而且即使这些都不是问题, 那么每个请求最起码也有下边一行

```ts
const getUser = () => request.get('/user')
```

那么这里不是每次你都还需要写 request.get 嘛. 其实这里问题不大, 没必要省代码省到很离谱的地步, 这里纠结的问题也不是为了省多少代码, 这只是其中一小部分, 更多的还是类型定义方面

因此有一天我在github上看到了一个对axios的二次封装的项目 [axits](https://github.com/kinglisky/axits)

因此基于这个思路我也封装了一个, 使用示例如下:

## 示例

`apiList` 是个对象, 里面包含了你注册的所有请求, 使用如下

```ts
const res = await apiList.getUser({
    id: ''
});

const res = await apiList.checkToken({
    token: 'xxx'
});
```

使用时你只需要找到 `apiList` 里对应的方法, 提供入参即可

注册请求示例如下:

```ts
import { createRequest } from '@hushaha/request';
import type { APISchemaResponse, ApiSchemas } from '@hushaha/request';

interface APISchemaRes extends APISchemaResponse {
	getUser: {
		request: {
			petId: string;
		};
		response: {
			name: string;
		};
	};
}

const apisScheams: ApiSchemas<APISchemaRes> = {
	getUser: {
		path: 'GET pet/:petId',
		headers: {
			'Content-Type': 'application/json'
		}
	}
};

const { apiList } = createRequest<APISchemaRes>(
	{
		baseURL: '/api'
	},
	apisScheams
);

export { apiList };
```

这里我注册了一个 `getUser` 方法

在 `apisScheams` 里进行地址, 请求类型, 自定义请求头的配置

在 `APISchemaRes` 里进行出入参的类型定义

因为有 `APISchemaResponse, ApiSchemas` 的约束, 这里必须是一一对应, 每个请求都有类型定义和配置定义

效果如下:

![](/images/q-request/request-1.png)

这个请求配置的结构我只是觉得也不错, 所以沿用了, 如果你不喜欢, 改一下 apisScheams 的结构即可

## 解析

说下我做这个事情的整体流程, 我会一步步的实现, 讲述我平常实现需求的思路

先分析下我的需求

我希望能提供一个 `create` 方法, 我执行完这个方法给我返回一个对象 `apiList` , 这个对象包含所有请求, 使用示例如上

然后执行 create 方法时我需要传入接口配置和类型定义, 因此我们先画个壳出来

### 初步开发

我定义这个 `create` 方法叫 `createRequest` , 需要接收 axios 的默认配置以及我们定义的接口配置

我希望的定义接口样式如下:

```ts
const apisScheams = {
    getUser: {
		path: 'GET pet/:petId',
	}
}
```

因此apis的ts类型应该长这个样子:

```ts
import type { AxiosRequestConfig } from 'axios';

export type ApiSchemas = {
	[string]: AxiosRequestConfig & {
		path: string;
	};
};
```

那我们开始编写 `createRequest` 方法:

```ts
import axios, type { AxiosRequestConfig, CreateAxiosDefaults } from 'axios';

export const createRequest = (requestConfig: CreateAxiosDefaults, apiSchema: ApiSchemas) => {
    const client = axios.create(requestConfig);

    const apiList = attachApiList(client, apiSchema);

    return { apiList, client }
}
```

这个 `attachApiList` 方法就应该组装出上述的 `apiList` 对象出来, 那个对象的类型应该是这样的:

```ts
type ApiList = {
	[string]: (params: any) => Promise<any>;
};
```

因此 `attachApiList` 方法如下(简化一下处理path的部分):

```ts
import type { AxiosInstance } from 'axios';

const attachApiList = (client: AxiosInstance, apiSchema: ApiSchemas) => {
	const apiList: ApiList = Object.create(null);
	
	for (const apiName in apiSchema) {
		const apiConfig = apiSchema[apiName];

		apiList[apiName] = (params) => {
			const _params = { ...(params || {}) };
			const { path, ...config } = apiConfig;

			// 这里处理apiConfig, 解析出path中的请求类型和url,以及url上的参数

			const requestParams = USE_DATA_METHODS.includes(method)
				? { data: _params }
				: { params: _params };

			return client.request({
				url,
				method: method.toLowerCase(),
				...requestParams,
				...config
			});
        }
    }

    return apiList;
}
```

到这里核心逻辑已经实现丸辣, 开始补充 ts

### 补充ts

首先需要在外部定义好请求的入出参类型定义, 而这个是在外边定义的再接进我们的方法里, 所以需要用到泛型. 我们定义外部提供的接口类型定义如下:

```ts
export type APISchemaResponse = Record<
	string,
	{
		request: Record<string, any> | void;
		response: Record<string, any> | any;
	}
>;
```

因此 `createRequest` 方法改造后如下:

```ts
const createRequest = <T extends APISchemaResponse>(
    requestConfig: CreateAxiosDefaults,
    apisScheams: ApiSchemas<T>
) => {
    const client = axios.create(requestConfig);

    const apiList = attachApiList<T>(client, apiSchema);

    return { apiList, client };
};
```

这里将泛型 `T` 传给 `attachApiList` , 目的是因为我们要根据传入的 `APISchemaResponse` 取出他的 key 作为枚举类型

继续调整 `attachApiList` 的类型定义:

```ts
type ApiList<T extends APISchemaResponse> = {
	[K in keyof T]: (params: T[K]['request']) => Promise<T[K]['response']>;
};

const attachApiList = <T extends APISchemaResponse>(
	client: AxiosInstance,
	apiSchema: ApiSchemas<T>
): ApiList<T> => {
    const apiList: ApiList<T> = Object.create(null);

    // ...

    return client.request({
        url,
        method: method.toLowerCase(),
        ...requestParams,
        ...config
    });
}
```

此时 `attachApiList` 返回的 `apiList` 的类型应该定义成了 key 是传入的 `APISchemaResponse` 的 key, value 是一个函数, 这个函数的入参是 `APISchemaResponse` 的 value 的 `request` 类型, 返回值是 `response` 类型

完事了, 接下来只需要完善一些额外逻辑, 加上 cancel 功能, 提供 client 出去支持自定义拦截器, 默认我也提供一套拦截器规则

### cancel功能

这里用类实现, 主要创建一个Map, 往里添加 `abortController` , 然后在每次请求时把 `abortController` 存起来, 在打开 cancel 的请求中根据当前 key 取出Map中的abortController 执行 abort 方法即可

具体实现如下:

```ts
class AbortHttp {
	private cancelMaps = new Map();

	getAbortKey(url: string) {
		return url.split('?')[0];
	}

	setAbortController(key: string, controller: AbortController) {
		this.cancelMaps.set(key, controller);
	}

	abort(key: string, type: 'check' | 'remove' = 'check') {
		switch (type) {
			case 'remove':
				this.cancelMaps.delete(key);
				break;
			case 'check':
			default:
				if (this.cancelMaps.has(key)) {
					this.cancelMaps.get(key).abort();
				}
				break;
		}
	}

	clear() {
		this.cancelMaps.clear();
	}
}

export default new AbortHttp();
```

接入到请求中应该是这样, 调整下 `createRequest` 入参

```ts
export const createRequest = <T extends APISchemaResponse>(
	requestConfig: CreateAxiosDefaults,
	apisScheams: ApiSchemas<T>,
	{
		interceptorsRequest,
		interceptorsResponse
	}: {
		interceptorsRequest?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig;
		interceptorsResponse?: (res: any) => any;
	} = {}
) => {
    client.interceptors.request.use(
		(
			config: InternalAxiosRequestConfig & {
				isCancel?: boolean;
			}
		) => {
			try {
				const { isCancel } = config;
				const key = abortHttp.getAbortKey(config.url!);

				if (isCancel) {
					abortHttp.abort(key);
				}

				const controller = new AbortController();
				config.signal = controller.signal;
				abortHttp.setAbortController(key, controller);
			} catch (e) {
				throw new Error(`接口报错:${e}`);
			}

			if (interceptorsRequest) {
				config = interceptorsRequest(config);
			}

			return config;
		}
	);
}
```

### 总结

上面说过, 这个封装对我来说确实起到了规范作用, 有时候写的时候嫌麻烦就不想定义类型, 用的时候 any 一把梭, 如果用这个方式还是很容易管控起来.

说过其中定义请求参数的地方是可以自定义修改的, 所以如果你不喜欢 `GET /url` 的方式, 你可以拿下我的代码修改这一部分逻辑即可

## 链接

[axits](https://github.com/kinglisky/axits)

[我封装的请求源码](https://github.com/hushaha/h-request)

[我的博客地址](https://blog.hushaha.top)

[自定义脚手架开发](https://blog.hushaha.top/blog/custom-vite-cli)
