@anyup/flyit

🔥 一个通用的前端工具包，源码使用 `TypeScript` 编写，原则上你可以在任何能运行 `JavaScript` 的地方使用，不依赖于任何的前端框架！

目的在于省略某些大量重复代码，少量配置化代码，即可实现极速开发体验！

🔥 文档网站

一. 安装

npm install @anyup/flyit

二. 使用

2.1 在 Vue / React 中使用

import { FlyHttp } from "@anyup/flyit";

// 1. 创建 axios 实例
const axiosInstance = axios.create({
  baseURL: "https://api.demo.com",
  timeout: 20000,
  headers: { "Content-type": "application/json" }
});

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(axiosInstance);

// 3. 定义 URL 配置表
const urls = {
  login: { url: "/login", method: "POST" }
};

// 4. 分发 URL
const api = flyHttp.dispatch(urls);

// 5. 页面接口
const login = () => {
  return api.login({ data: { username: "admin" } });
};

2.2 在 h5 / browser 中使用

复制 dist 文件夹下的 flyit.umd.js文件，或使用 cdn 线上地址，引入现有的项目中。

以使用 jquery 的 ajax 请求为例：

<script src="dist/flyit.umd.js"></script>
<script src="dist/jquery.min.js"></script>

<script>
  const { FlyHttp } = Flyit;

  const baseURL = "https://api.demo.com";
  const headers = { "Content-type": "application/json" };

  // 1. 创建 ajax 实例
  function ajaxRequest({ url, method, data, success, fail, complete }) {
    $.ajax({
      url: `${baseURL}${url}`,
      type: method,
      data,
      dataType: "json",
      headers,
      success: success,
      error: fail,
      complete: complete
    });
  }

  // 2. 创建 FlyHttp 实例
  const flyHttp = new FlyHttp.Builder((config) => {
    const { url, method, data } = config;
    return ajaxRequest({ url, method, data });
  });

  // 3. 定义 URL 配置表
  const urls = {
    login: { url: "/login", method: "POST" }
  };

  // 4. 分发 URL
  const api = flyHttp.dispatch(urls);

  // 5. 页面接口
  const login = () => {
    api.login({
      data: { username: "admin" },
      success: (res) => {
        console.log("success", res);
      },
      fail: (res) => {
        console.log("fail", res);
      },
      complete: (res) => {
        console.log("complete", res);
      }
    });
  };
</script>

2.3 在 node 中使用

2.3.1 ESM模块规范

import { FlyHttp } from "@anyup/flyit";

// 1. 创建 http 实例
const httpInstance = {};

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(httpInstance);

// 3. 定义 URL 配置表
const urls = {
  login: { url: "/login", method: "POST" }
};

// 4. 分发 URL
const api = flyHttp.dispatch(urls);

// 5. 页面接口
const login = () => {
  return api.login({ data: { username: "admin" } });
};

2.3.2 CJS模块规范

const { FlyHttp } = require("@anyup/flyit");

// 1. 创建 http 实例
const httpInstance = {};

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(httpInstance);

// 3. 定义 URL 配置表
const urls = {
  login: { url: "/login", method: "POST" }
};

// 4. 分发 URL
const api = flyHttp.dispatch(urls);

// 5. 页面接口
const login = () => {
  return api.login({ data: { username: "admin" } });
};

2.4 说明

2.4.1 使用 http 实例

参考第 2.1 部分，在 Vue / React 中使用，使用 axios 的构建方案!

本工具支持传入 http 实例，将会代理 http 实例进行请求，但是对 http 的请求格式有一些要求：

• http 请求必须支持 Promise
• http 请求格式为 http.request(params)

params 参数对象大致如下：

// `url` 是用于请求的服务器 URL
url: "/user";

// `method` 是创建请求时使用的方法
method: "get"; // 默认值

// `params` 是与请求一起发送的 URL 参数
params: {
  ID: 12345;
}

// `data` 是作为请求体被发送的数据
data: {
  firstName: "Fred";
}

2.4.2 使用自定义函数

使用 http 实例，可能有时候会有一定的耦合性，会不符合要求，因此提供一个自定义函数的入口，可灵活使用！

参考第 2.2 部分，在 h5 / browser 中使用，使用 ajax 的构建方案!

// 1. 创建 ajax 实例
function ajaxRequest({ url, method, data, success, fail, complete }) {
  $.ajax({
    url: `${baseURL}${url}`,
    type: method,
    data,
    dataType: "json",
    headers,
    success: success,
    error: fail,
    complete: complete
  });
}

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder((config) => {
  const { url, method, data } = config;
  return ajaxRequest({ url, method, data });
});

三. 说明

该工具类已经在多个项目中实验，具有良好的可塑造性，灵活性，以及可维护性！

原则上你可以在任何能运行 JavaScript 的地方使用，不依赖于任何的前端框架！但是由于目前众多的前端开发框架以及请求库，我可能也未能兼容某些特殊用法，因此可能难免遇到一些未知的问题。

如果使用过程中有任何问题，可以通过如下方式联系我：

• 微信号：anyupxing

• 微信公众号：前端梦工厂

• 掘金：个人主页