🔥 一个通用的前端工具包，源码使用 `TypeScript` 编写，原则上你可以在任何能运行 `JavaScript` 的地方使用，不依赖于任何的前端框架！
\n\n目的在于省略某些大量重复代码，少量配置化代码，即可实现极速开发体验！
\n\n\n 🔥 文档网站\n
\n\n## 一. 安装\n\n```sh\nnpm install @anyup/flyit\n```\n\n## 二. 使用\n\n### 2.1 在 Vue / React 中使用\n\n```js\nimport { FlyHttp } from \"@anyup/flyit\";\n\n// 1. 创建 axios 实例\nconst axiosInstance = axios.create({\n baseURL: \"https://api.demo.com\",\n timeout: 20000,\n headers: { \"Content-type\": \"application/json\" }\n});\n\n// 2. 创建 FlyHttp 实例\nconst flyHttp = new FlyHttp.Builder(axiosInstance);\n\n// 3. 定义 URL 配置表\nconst urls = {\n login: { url: \"/login\", method: \"POST\" }\n};\n\n// 4. 分发 URL\nconst api = flyHttp.dispatch(urls);\n\n// 5. 页面接口\nconst login = () => {\n return api.login({ data: { username: \"admin\" } });\n};\n```\n\n### 2.2 在 h5 / browser 中使用\n\n> 复制 `dist` 文件夹下的 `flyit.umd.js`文件，或使用 `cdn` 线上地址，引入现有的项目中。\n\n以使用 `jquery` 的 `ajax` 请求为例：\n\n```html\n\n\n\n\n```\n\n### 2.3 在 node 中使用\n\n#### 2.3.1 ESM模块规范\n\n```js\nimport { FlyHttp } from \"@anyup/flyit\";\n\n// 1. 创建 http 实例\nconst httpInstance = {};\n\n// 2. 创建 FlyHttp 实例\nconst flyHttp = new FlyHttp.Builder(httpInstance);\n\n// 3. 定义 URL 配置表\nconst urls = {\n login: { url: \"/login\", method: \"POST\" }\n};\n\n// 4. 分发 URL\nconst api = flyHttp.dispatch(urls);\n\n// 5. 页面接口\nconst login = () => {\n return api.login({ data: { username: \"admin\" } });\n};\n```\n\n#### 2.3.2 CJS模块规范\n\n```js\nconst { FlyHttp } = require(\"@anyup/flyit\");\n\n// 1. 创建 http 实例\nconst httpInstance = {};\n\n// 2. 创建 FlyHttp 实例\nconst flyHttp = new FlyHttp.Builder(httpInstance);\n\n// 3. 定义 URL 配置表\nconst urls = {\n login: { url: \"/login\", method: \"POST\" }\n};\n\n// 4. 分发 URL\nconst api = flyHttp.dispatch(urls);\n\n// 5. 页面接口\nconst login = () => {\n return api.login({ data: { username: \"admin\" } });\n};\n```\n\n### 2.4 说明\n\n#### 2.4.1 使用 http 实例\n\n> 参考第 `2.1` 部分，在 Vue / React 中使用，使用 `axios` 的构建方案!\n\n本工具支持传入 `http` 实例，将会代理 `http` 实例进行请求，但是对 `http` 的请求格式有一些要求：\n\n- `http` 请求必须支持 `Promise`\n- `http` 请求格式为 `http.request(params)`\n\n`params` 参数对象大致如下：\n\n```js\n// `url` 是用于请求的服务器 URL\nurl: \"/user\";\n\n// `method` 是创建请求时使用的方法\nmethod: \"get\"; // 默认值\n\n// `params` 是与请求一起发送的 URL 参数\nparams: {\n ID: 12345;\n}\n\n// `data` 是作为请求体被发送的数据\ndata: {\n firstName: \"Fred\";\n}\n```\n\n#### 2.4.2 使用自定义函数\n\n使用 http 实例，可能有时候会有一定的耦合性，会不符合要求，因此提供一个自定义函数的入口，可灵活使用！\n\n> 参考第 `2.2` 部分，在 h5 / browser 中使用，使用 `ajax` 的构建方案!\n\n```js\n// 1. 创建 ajax 实例\nfunction ajaxRequest({ url, method, data, success, fail, complete }) {\n $.ajax({\n url: `${baseURL}${url}`,\n type: method,\n data,\n dataType: \"json\",\n headers,\n success: success,\n error: fail,\n complete: complete\n });\n}\n\n// 2. 创建 FlyHttp 实例\nconst flyHttp = new FlyHttp.Builder((config) => {\n const { url, method, data } = config;\n return ajaxRequest({ url, method, data });\n});\n```\n\n## 三. 说明\n\n该工具类已经在多个项目中实验，具有良好的可塑造性，灵活性，以及可维护性！\n\n原则上你可以在任何能运行 `JavaScript` 的地方使用，不依赖于任何的前端框架！但是由于目前众多的前端开发框架以及请求库，我可能也未能兼容某些特殊用法，因此可能难免遇到一些未知的问题。\n\n如果使用过程中有任何问题，可以通过如下方式联系我：\n\n- 微信号：**anyupxing**\n\n- 微信公众号：**前端梦工厂**\n\n- 掘金：[个人主页](https://juejin.cn/user/4230576472589976/posts)\n","readmeFilename":"README.md"}