Let Hupu-Girl give you some response -- 一个轻量在线API请求工具诞生记


我不过略有一些讨人喜欢的地方而已,怎么会有什么迷人的魅力

       ----William Shakespeare, The Merry Wives of Windsor

Interface

1567101763642.png

使用场景

它是填补 使用postman批量测试 & 手动在浏览器输入API测试 中间空白区域的一个在线工具,负责轻量级的API接口请求测试。

支持功能

featuredetail
Restful接口请求GET POST PUT DELETE OPTION
自定义添加请求头预设2种快捷设置user/token
设置参数路径拼接+request body
展示响应信息status content-type cashe-control expires response
请求记录一键使用(暂未支持参数)

谁去使用

谁都可以,只要你有API请求需求,但又不想开启postman。

当然,它的定义是轻量级,所以它的最佳使用场景是 少量API,零碎使用,开箱即用,用完就走


诞生记 - 包括原理解析

Base on Postwoman - An online, open source API request builder by Liyas Thomas

对其二次开发之后产出,感谢原作者的开源。

第一步

拿到代码之后, 不着急对其修改。

首先我对其目录结构 \ 核心依赖 \构建框架 进行了解,总结如下 (非重点 不赘述):

Nuxt 构建Vue编写XHR原理

第二步

制定开发计划:去其无用之处,保留核心功能,填补功能空缺。

换肤功能 => 去掉,要专一

UI调整 => 优化,美美美

核心功能区 => 中文表述,你懂得

添加功能 => 你的我的,大家的

第三步

干活 = > 优化 & 添新

  • 快速填入

1567104356759.png

代码中对请求URL做了强校验,如果不符合URL标准就无法发起请求,需要使用者手动把URL和路径进行拆分,然后填入对应的输入框中,这一点有可能会影响使用者,考虑再三,干掉这个校验。现在可以不拆分路径,直接把完整请求路径填入URL输入框就可以发起请求。

1567104578791.png

  • 自定义请求头

前面说过了接口请求的实现原理是利用XHR发起网络请求,应用请求方式并携带自定义参数,那么对XHR的理解可以很方便的让我们实现自定义请求头的功能。

carbon (2).png

  • 响应状态优化

如果响应超时,那么我们应该对使用者进行提示,并且设置timeout的时间值,基准值设置为10000ms,如果一个API接口10s之后才有响应,那么这个API接口可能存在的意义也就不太大,所以我们对XHR进行再改造

carbon (1).png

如果响应失败,可能会有2种情况:一种是真正的请求失败(包含失败的响应),一种是跨域引起的请求失败(无失败响应),所以我们要给使用者明确的请求结果。

image-20190830110236552.png

carbon.png

还有一些代码逻辑的变动,但是对主功能并未造成影响,就不展开讲了,接下里我们可以讨论一下这个平台实现的方式。其实XHR已经是一个老朋友了,它出现了很久,一直是Ajax核心组成。

XHR到现在已经到了2.0:

  • 加跟进时代的API
  • 更方便的表单提交xhr.send(FormData)
  • 跨域资源共享(CORS,当然还是要加响应头)

ajjax.png

新功能让它又能焕发活力,但是除了XHR请求之外,我们还有了另外一个选择:Fetch ,更现代的编程模式,简洁的使用方式,原生支持,配合流完成更底层的功能。那么现在Hupu-Girl的这一整套逻辑是否可以由Fetch实现呢?我的答案是可以

carbon (4).png

我预计利用空余时间对其进行”骨骼改造“,在不影响轻量级定位上增加更多的功能,比如:

  • 历史记录一键带参带请求头使用
  • 文件上传提交
  • 表单提交
  • 增加是否携带cookie选项
  • [单接口定时巡航]()
  • 预设更多常用请求头...

我们应该再做什么

我认为开发Hupu-Girl是一件愉悦的事情,甚至到开发完成部署到测试服务器上都让我感觉很愉快,因为这样的产出是和工作产出是不一样的(当然不影响正常工作是开发前提),我利用自己的所学所知可以创造出一些比较适合我们需要的工具、平台、系统,经过验证之后进行推广宣传,可以让我成长的更快,收货的更多。

当然,我们还是要给大脑预留出一片”原创“空间,去开发一些由0到1的产物,别人能做成的事情我们一定可以做,虎扑人牛啤。

tip: 关于这个online tool的一切命名和UI都为临时,广泛收集建议可随时更新

temp-name: Hupu-Girl

temp-URL: 公司内网,略去

About Hupu-Girl,Welcome Judge ,It's open!

声明:GodGc's World|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Let Hupu-Girl give you some response -- 一个轻量在线API请求工具诞生记


軟件工程沒有銀彈