httpYac——『蝇量级』API管理工具快速上手

原文链接：https://mp.weixin.qq.com/s/64eg59RpK4aDxt6ApEtTYA

我找了一圈Postman、Apifox的替代品，最终发现了httpYac，一款可以作为VSCode插件运行的API管理工具。

大家好，这里是孙博士研究所，专注于提升公众号写作效率！

我找了一圈Postman、Apifox的替代品，最终发现了httpYac，一款可以作为VSCode插件运行的API管理工具。

花了半小时迁移了几个接口之后，我发现了httpYac的几个优点：

属于蝇量级的选手，可以直接在VSCode中运行
使用纯文本来管理API，可以直接把文件放在项目中
支持环境切换、支持变量、支持请求依赖

之所以想要换一款API管理工具，是因为我一直用的Apifox遭受了『供应链攻击』，我也是点背，很少打开Apifox，偏偏就在攻击的第一天打开了，然后就花了半天时间改了各种登录凭证。

我早就想换掉Apifox，功能复杂，启动慢，而且还整出这样的幺蛾子，我只能抓紧换掉。

下面来看看如何快速上手httpYac

1、安装

直接在VSCode的Extensions中搜索httpYac，安装即可。

2、第一个请求

新建一个api.http文件，在里面输入如下内容：

1	`GET https://httpbin.org/anything?q=httpyac`

然后点击左侧的▶️就可以发送请求了，就这么朴实无华！

3、发送POST

发送x-www-form-urlencoded
1
2
3
4

1	`POST https://httpbin.org/anything``Content-Type: application/x-www-form-urlencoded````grant_type=client_credentials`

发送json
1
2
3
4
5
6

1	`POST https://httpbin.org/anything``Content-Type: application/json````{``"count": 10``}`

4、设置Header

Header只要跟在请求后面就可以了，例如下面的Content-Type和Authorization

1	`POST https://httpbin.org/anything``Content-Type: application/json``Authorization: Bearer 123456````{``"count": 10``}`

5、文件上传

`POST https://httpbin.org/anything``Content-Type: multipart/form-data; boundary=WebKitFormBoundary````--WebKitFormBoundary``Content-Disposition: form-data; name="text"````invoice_text``--WebKitFormBoundary``Content-Disposition: form-data; name="title"````invoice_title``--WebKitFormBoundary``Content-Disposition: form-data; name="file"; filename="test.png"``Content-Type: image/png````< ./test.png``--WebKitFormBoundary--`

需要注意

name一定要和代码中的对应起来。
< ./test.png是将当前目录下的 test.png 上传。

看到这里是不是发现了，httpYac 的 .http 文件本质上就是一个符合 RFC 2616 标准的纯文本 HTTP 请求描述文件，所以你现在已经掌握httpYac 80%的功能了，接下来就是httpYac的大招。

6、变量

一般来说一个API接口会分为开发和线上，它们的域名不同，这时候我们就可以设置一个host变量，这样只要改一下这个变量就可以快速测试线上环境了。

1	`@host=https://httpbin.org``GET {{host}}/anything?q=httpyac`

其中@host=https://httpbin.org定义了一个host变量，它的值是https://httpbin.org。
GET {{host}}/anything?q=httpyac在运行的时候就会被替换为GET https://httpbin.org/anything?q=httpyac

7、返回数据引用

有时候我们的B接口的参数需要通过A接口获取，比如B接口需要用户的Token，而用户Token是由登录接口A返回的。

此时我们就可以在A接口的返回数据命名为user，如下所示

1	`@host=https://myserver.com``### 用户登录``# @name user``POST {{host}}/user/login``Content-Type: application/json````{``"name": "test",``"password": "1234"``}`

其中# @name user 使用@name将用户登录接口的返回数据赋值给了user变量，我们在其他接口中就可以直接使用了，如下所示：

1	`### 获取用户信息``# @ref user``GET {{host}}/user/info``Authorization: Bearer {{user.token}}`

如果登录接口返回的是json数据的话，httpYac会自动解析，在登录接口中假设返回的数据是：

1	`{``"token": "abcde",``"name": "test"``}`

那么我们就可以通过user.token来指向返回数据中的abcde。所以在用户接口中通过{{user.token}}将返回的token放在Header中了。

因为获取用户信息接口依赖登录，所以可以通过# @ref user来表明依赖关系，这样我们在运行获取用户信息接口的时，如果user变量还未赋值，httpYac就会先请求用户登录接口，然后再请求获取用户信息接口。

8、环境

我们在变量中提到了开发环境和线上环境，如果使用变量的话我们需要修改变量值来切换不同的环境。httpYac还提供了更简单的方法，我们可以新建两个文件.env.dev和.env.prod分别表示开发环境和线上环境。
.env.dev的内容如下：

1	`host=http://localhost:3000`

.env.prod的内容如下：

1	`host=https://myserver.com`

这两个文件定义了变量host的值，这样我们用VSCode打开api.http文件后，可以通过顶部的env来选择不同的.env文件，从而可以实现环境的快速切换。

注意

在.env文件中定义了变量之后，需要把.http文件中的同名变量删掉。

9、图片预览

如果我们想直接预览接口中返回的图片，可以使用# @openWith imagePreview.previewEditor

如下所示：

1	`# @openWith imagePreview.previewEditor``GET https://raw.githubusercontent.com/AnWeber/vscode-httpyac/master/icon.png`

注意

接口响应的content-type需要是图片才能预览。

好了，简简单单几个例子就可以快速上手httpYac了，要是能早发现它就好了！

感谢您的阅读，这里是孙博士研究所，欢迎点赞+关注，我会持续分享公众号写作、排版技巧。

文章推荐

本文转载自微信公众号，如有侵权请联系删除。