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

FlyHttp的相关文章:

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

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

FlyHttp 的使用:如何高效使用 FlyHttp,支持 JS、TS 项目

FlyHttp 的最佳实践:加速项目级 API 请求构建

讲述 FlyHttp 设计思想

Vue.js 框架为例子,我们简单看一下,在进行项目开发中,使用 axios 在前端进行网络请求,我们需要进行哪些步骤?

1. 传统的开发流程

1.1封装 axios

在我们进行前端项目开发时,封装 axios 是必须的。因为每个项目业务可能都不一样,但是封装思想都是一样的,封装适合自己的 axios,不但可以统一管控自己的请求入口,还能大大节约请求工作量,这其中的好处不言而喻。

直接拿来我自己封装的 axios 核心代码,包括但不限于以下的简单形式:主要是构建实例,请求拦截等。

import axios, { AxiosInstance } from 'axios';// 配置新建一个 axios 实例
const request: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 50000,headers: { 'Content-Type': 'application/json' },
});// 添加请求拦截器
request.interceptors.request.use((config) => {// 在发送请求之前做些什么,比如认证tokenif ('token') {config.headers!['Authorization'] = 'token';}return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
request.interceptors.response.use((response) => {// 对响应数据做点什么const res = response.data;if (res.status && res.status !== 200) {return Promise.reject(request.interceptors.response);} else {return res;}},(error) => {// 对响应错误做点什么if (error.message.indexOf('timeout') != -1) {console.error('网络超时');} else if (error.message == 'Network Error') {console.error('网络连接错误');} else {if (error.response.data) console.error(error.response.statusText);else console.error('接口路径找不到');}return Promise.reject(error);}
);
1.2 开发请求 API

对以上简单封装后,我们就可以使用封装好的 axios 实例来进行编写请求方法了

import request from '@/utils/request'// 定义接口地址
const api = {useLogin: '/api/user/login', // 用户登录useLogout: '/api/user/logout' // 用户登出// ...等等还有很多接口地址
}// 用户登录方法
export function useLogin(data) {return request({url: api.useLogin,method: 'POST',data})
}// 用户登出方法
export function useLogout(data) {return request({url: api.useLogout,method: 'POST',data})
}// ...等等还有很多方法

页面中使用方式如下:

import api from '@/api'// 用户登录
api.userLogin(params)
// 用户的登出

通过以上的步骤,我们就实现了传统的、标准化的请求流程,这种请求使用方式是在前端项目中,我认为是最常见的代码书写方式,很简单、很规范、也很好理解,可以说结构特别清晰,我认为完全没有问题!因为我在项目中,大致也是这么使用的。

2 思考如何优化?

通过以上方式的实现,我们我们有没有想过,我们在不断的重复写一些代码,不断重复的写这些 API 声明、API 请求方法!如果是一个庞大的应用,API 有几百个也是有可能的。

试想一下:有多少个 API 地址,我们就会写多少个请求方法。如果将来需要改动,我们也要联动改动。那么在实际开发中可不可以优化呢?这些重复的方法声明可以省略掉吗?(重复的代码我不想写第二遍

因此,本工具的理念就是做这些重复的劳动,我们只需要配置,其他的交给工具就可以了!

2.1 工具雏形

3.1.2 的代码步骤中,其实有一些是可以省略掉的,接口地址的定义属于配置文件,必须声明,因为每一个接口地址都是不同的。但是可以将请求方法的的构建省略,因为它们都具有相似性,可以使用函数将其生成。

基于以上这个思想,就有了该工具库的雏形,如下部分核心代码:

import request from '@/utils/request'// 定义接口地址
const api = {useLogin: '/api/user/login', // 用户登录useLogout: '/api/user/logout' // 用户登出// ...等等还有很多接口地址
}
const modules = {}// 写一个函数自动注入
Object.keys(api).forEach(key => {modules[key] = function (parameter, config = {}) {const url = config.url || api[key]const method = config.method || 'get'const params = method === 'get' ? parameter : {}const data = method === 'get' ? {} : parameterreturn request({ ...{ url, method, params, data }, ...config })}
})export default modules

如下图所示,可以看到,通过运行代码,已经生成了请求类。

页面中使用方式如下:

import api from '@/api'// 用户登录
api.userLogin(params)
// 用户的登出
api.userLogout()
// 一些开发的参数传递
api.userLogin(params, { method: 'POST' })
2.2 改进思考

其实以上的操作能够节省掉 80% 的代码,至少我们所有的方法声明都不用写,但是同时也有个问题,并不能适用于所有的方式!比如 RESTful 接口形式的请求。

可能有些前端开发对 RESTful 不太了解,这里简单说一下 RESTful 接口形式:

RESTful(Representational State Transfer)是一种基于资源的软件架构风格,它是一种设计网络应用程序的方式,特别适用于构建 Web 服务,它是一种基于 REST 原则设计的接口规范

说白了,RESTful 接口使用 HTTP 协议定义了一组常见的操作行为:GET(获取资源)、POST(创建资源)、PUT(更新资源)、DELETE(删除资源)等。通过合理地使用这些 HTTP 方法,可以实现对资源的增删改查操作。

说的再直白一点,就是接口地址是一样的,通过请求方式(GET/POST/PUT/DELETE)实现对资源的增删改查操作。

因此,假如我们有一些接口是这一种请求方式,通过 id 获取用户信息:/api/user/{id},以上的方式却不太适合,我们可以进行加以改造:

import request from '@/utils/request'// 定义接口地址
const api = {user: '/api/user' // 用户模块
}
const modules = {}// 改进函数,添加 append 参数,用
Object.keys(api).forEach(key => {modules[key] = function (parameter, config = {}) {const append = config.append || ''const url = `${config.url || api[key]}${append}`const method = config.method || 'GET'const params = method === 'GET' ? parameter : {}const data = method === 'GET' ? {} : parameterreturn request({ ...{ url, method, params, data }, ...config })}
})
// 其他不兼容的方法,可使用自定义方法
modules.other = function (params) {return request({ url: '', params, method: 'GET' })
}export default modules

再次运行代码,请求类已经包含了我们的自定义 other 方法

页面中使用方式如下:

import api from '@/api'// 新增用户
api.user(params, { method: 'POST' })
// 删除用户
api.user({}, { method: 'DELETE', append: `/${userId}` })
// 修改用户
api.user(params, { method: 'PUT' })
// 查询用户
api.user(params, { method: 'GET', append: `/${userId}` })// 其他不兼容的方法,使用自定义方法
api.other(params)

以上的代码其实就是 Flyit 工具库中 FlyHttp 模块的核心思想,后面的改进优化思路也都是依据请求框架来不断进步的,我整理了一下思路和代码,现已经将它发布到 npm,接下来我们看看具体如何使用吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/484398.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在CentOS上无Parallel时并发上传.wav文件的Shell脚本解决方案

在CentOS上无Parallel时并发上传.wav文件的Shell脚本解决方案 背景概述解决方案脚本实现脚本说明使用指南注意事项在CentOS操作系统环境中,若需并发上传特定目录下的.wav文件至HTTP服务器,而系统未安装GNU parallel工具,我们可通过其他方法实现此需求。本文将介绍一种利用Sh…

springboot整合flowable工作流

1、工作流介绍 1.Flowable起源于Activiti工作流引擎,由Activiti的主要开发者在2016年创建。它继承了Activiti的众多优点,并在此基础上进行了优化和改进,以提供更加稳定、高效的工作流管理解决方案。Flowable与Activiti有着共同的祖先&#x…

Linux Shell 脚本题目集(2)

1、使用 case 语句根据用户输入的分数(0-100)输出相应的成绩等级(A, B, C, D)。 #! /bin/bashread -p "请输入您的分数(0-100):" score# 验证输入是否为数字且在0到100之间 if ! [[ …

交换机四大镜像(端口镜像、流镜像、VLAN镜像、MAC镜像)应用场景、配置实例及区别对比

在网络管理中,端口镜像、流镜像、VLAN镜像和MAC镜像都是用于监控和分析网络流量的重要技术。 端口镜像(Port Mirroring) 定义:端口镜像是将一个或多个源端口的流量复制到一个目标端口,以便于网络管理员能够监控和分析…

Redis(1)

Redis是一个在内存中存储数据的中间件。 1.在内存中存储数据。 通过数据结构来存储,mysql通过表的方式存储数据,是关系型数据库,redis通过键值对存储,key的类型是string,value的类型是非关系型数据库。 2.可编程的 …

基于Pyside6开发一个通用的在线升级工具

UI main.ui <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>MainWindow</class><widget class"QMainWindow" name"MainWindow"><property name"geometry"&…

Linux 系统/etc目录下配置文件分类

目录 一、网络相关配置文件 主机名与 IP 映射类 /etc/hosts /etc/hostname 网络接口配置类 /etc/sysconfig/network-scripts/ifcfg-ens33 DNS 相关类 /etc/resolv.conf /etc/host.conf 网络服务相关类 /etc/hosts.allow文件 /etc/hosts.deny文件 /etc/netconfig …

自由学习记录(28)

C# 中的流&#xff08;Stream&#xff09; 流&#xff08;Stream&#xff09;是用于读取和写入数据的抽象基类。 流表示从数据源读取或向数据源写入数据的矢量过程。 C# 中的流类是从 System.IO.Stream 基类派生的&#xff0c;提供了多种具体实现&#xff0c;每种实现都针对…

Redis3——线程模型与数据结构

Redis3——线程模型与数据结构 本文讲述了redis的单线程模型和IO多线程工作原理&#xff0c;以及几个主要数据结构的实现。 1. Redis的单线程模型 redis6.0之前&#xff0c;一个redis进程只有一个io线程&#xff0c;通过reactor模式可以连接大量客户端&#xff1b;redis6.0为了…

Elasticsearch Serverless 现已正式发布

作者&#xff1a;来自 Elastic Yaru Lin 基于全新无状态&#xff08;stateless&#xff09;架构的 Elasticsearch Serverless 现已正式发布。它采用完全托管方式&#xff0c;因此你可以快速启动项目而无需操作或升级&#xff0c;并且可以使用最新的向量搜索和生成式 AI 功能。 …

Android CoordinatorLayout:打造高效交互界面的利器

目录 一、CoordinatorLayout 介绍及特点 二、使用方法 2.1 创建 CoordinatorLayout 布局 2.2 添加需要协调的子视图 2.3 自定义 Behavior 三、结语 相关推荐 在Android开发中&#xff0c;面对复杂多变的用户界面需求&#xff0c;CoordinatorLayout以其强大的交互管理能力…

基于Java Springboot旅游攻略APP且微信小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 微信…

多模态大语言模型的对比

简介 文章主要对比了包括 VideoLLaMA 2 、CogVLM2-video 、MiniCPM-V等模型 目前主流的多模态视觉问答大模型&#xff0c;大部分采用视觉编码器、大语言模型、图像到文本特征的投影模块 目录 简介1. VideoLLaMA 21.1 网络结构1.2 STC connector具体的架构 2. MiniCPM-V 2.62.…

Android渗透环境配置教程

工具 模拟器 ADB brew install android-platform-tools set import cert # cer 证书转为 pem 证书 openssl x509 -inform DER -in cacert.der -out cacert.pem# 获取证书的 hash 值 hash$(openssl x509 -inform PEM -subject_hash_old -in cacert.pem | head -n 1)# 将 pem…

Microi吾码|.NET、VUE快速搭建项目,低代码便捷开发教程

Microi吾码&#xff5c;VUE快速搭建项目&#xff0c;低代码便捷开发教程 一、摘要二、Microi吾码介绍2.1 功能介绍2.2 团队介绍2.3 上线项目案例 三、VUE中使用Microi吾码3.1 前期了解3.2 创建第一个低代码应用3.3 接口API使用说明3.4 引擎界面可视化配置&#xff0c;生成API3.…

常见Linux命令(详解)

文章目录 常见Linux命令文件目录类命令pwd 打印当前目录的绝对路径ls 列出目录内容cd 切换路径mkdir 建立目录rmdir 删除目录touch 创建空文件cp 复制文件或目录rm 移除文件或者目录mv 移动文件与目录或重命名cat 查看文件内容more 文件分屏查看器less 分屏显示文件内容head 显…

AI - 如何构建一个大模型中的Tool

AI - 如何构建一个大模型中的Tool 大家好&#xff01;今天我们聊聊一个有趣的技术问题&#xff1a;什么是工具&#xff08;Tool&#xff09;&#xff0c;如何使用聊天模型调用工具&#xff0c;以及如何将工具的输出传递给聊天模型。我们还是基于LangChain来进行讨论&#xff0…

【测试工具JMeter篇】JMeter性能测试入门级教程(四):JMeter中BeanShell内置方法使用

一、什么是BeanShell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法;BeanShell是一种松散类型的脚本语言(这点和JS类似);BeanShell是用Java写成的,一个小型的、免费的、可以下载的、嵌入式的Java源代码解释器,具有对象脚本语言特性,非常精简…

MyBatis异常体系中ErrorContext和ExceptionFactory原理分析

&#x1f3ae; 作者主页&#xff1a;点击 &#x1f381; 完整专栏和代码&#xff1a;点击 &#x1f3e1; 博客主页&#xff1a;点击 文章目录 exceptions包分包设计ExceptionFactory类介绍为什么使用工厂不是直接new呢&#xff1f;【统一的异常处理机制】【异常的封装与转化】【…

白鹿 Hands-on:消除冷启动——基于 Amazon Lambda SnapStart 轻松打造 Serverless Web 应用(二)

文章目录 前言一、前文回顾二、在 Lambda 上运行2.1、查看 Amazon SAM template2.2、编译和部署到 Amazon Lambda2.3、功能测试与验证 三、对比 Snapstart 效果四、资源清理五、实验总结总结 前言 在这个环节中&#xff0c;我们将延续《白鹿 Hands-on&#xff1a;消除冷启动——…