FlyHttp的相关文章：

FlyHttp 的诞生：从认识各种网络请求开始

FlyHttp 的设计思想：前端 API 自动化构建工具

FlyHttp 的使用：如何高效使用 FlyHttp，支持 JS、TS 项目

一. FlyHttp 是什么？

这是一个自动生成前端代码 service 层的工具，目的就是要解放你的双手，化繁为简，可降低代码量 99% ！

1. 说明

FlyHttp 模块提供了两种构建模式，一种是直接使用我们已经二次封装的好的 http 实例，使用 http 实例有一些规则要求，主要参考 axios 设计，如果不支持这种方式，我也提供了另一种自定义函数的方式来兼容，总之可以兼容大部分请求形式！

2. 使用 http 实例

在 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'
}

3. 使用自定义函数

使用 http 实例，可能有时候会有一定的耦合性，极端情况下（可能有我没有用的请求库，请求格式不统一等）有可能会不符合要求，因此提供一个自定义函数的入口，可灵活使用！

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

// 1. 创建 ajax 实例
function ajaxRequest({ url, method, data, success, fail, complete }) {jQuery.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 } = configreturn ajaxRequest({ url, method, data })
})

二 浅谈 FlyHttp 最佳实践

开发时的最佳实践是一系列被广泛认可的方法和原则，可以帮助开发人员提高代码质量、提高团队效率、降低维护成本等。

以下是我总结的在进行 API 网络请求开发时的最佳实践，仅供参考：

1. 构建流程顺序

2. Axios + FlyHttp 使用流程

以下是我在使用 Vue3 开发项目时的部分核心代码截图，请参考：

3. 请求示例演示

三. FlyHttp 适用领域

这是一个通用的 TypeScript 包，适用于任何在前端开发中，原则上你可以在任何能运行 JavaScript 的地方使用，与前端框架无关，可全端通用，包括但不限于使用以下方式开发：

• JavaScript

• TypeScript

• Vue.js

• React.js

• Angular.js

• uni-app

• 小程序

四. 说明

1. 在使用本工具前，要求你至少了解相关框架的不同网络请求库的使用方式，比如：axios、ajax、Fetch API的基本使用和基本配置，然后再查看本文档。

2. 本文档仅负责介绍 Flyit 工具的相关使用，如需了解更多其他相关内容，请移步相关的官方文档：

• FlyHttp 官方文档

• Vue.js 官方文档

• uni-app request 官方文档

• Axios 请求库官方文档

• Fetch API

• jQuery ajax

• XMLHttpRequest MDN