在传统的restful接口调试中,我们通常使用Swagger、postman或者curl等工具进行调试,作为前端工程师,在最为常用的VScode编辑器中,使用rest client插件调试restful接口可能会更加方便。它的特点是只要在文件夹中创建以.http或.rest 为后缀的文件,便可完成restful接口调试到代码生成的全过程。
安装
点开插件市场,搜索rest client安装即可。
基础使用
我们可以创建空白文件example.http, 然后编辑一个简单的GET请求:
## 基础GET请求示范
# Send Request
GET https://baidu.com
在GET 请求的域名上会出现一个灰色的Send Request文字,点击之后,我们可以在Vscode窗口中看到整个HTTP请求的所有信息。
HTTP/1.1 200 OK
Bdpagetype: 1
Bdqid: 0x852445df000a2a02
Cache-Control: private
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Thu, 10 Dec 2020 09:07:18 GMT
Expires: Thu, 10 Dec 2020 09:06:24 GMT
P3p: CP=" OTI DSP COR IVA OUR IND COM ", CP=" OTI DSP COR IVA OUR IND COM "
Server: BWS/1.1
<!DOCTYPE html><!--STATUS OK-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="always" name="referrer">
<meta name="theme-color" content="#2932e1">
<meta name="description" content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。
百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。">
发送POST请求
# Send Request
POST https://api.cloud-wave.com/account/v4/auth/login HTTP/1.1
content-type: application/json
{
"username": "admin",
"password": "123456"
}
注意:header 配置信息和post发送的body数据中间必须空一格
如果你是一个熟练掌握各种调试工具且年过三十的老工程师,你可能觉得这东西有什么好奇的,满大街的restful接口调试工具不都这样么?那么接下来就要介绍rest client不一样的地方了。
搬砖代码的自动生成
向这种发起网络请求的搬砖代码在我们在编写业务代码时经常会遇到,显然我们并不希望把时间浪费在这上面。rest client会帮助我们一键生成搬砖码。操作非常简单:第一步将某段调试代码用光标全选,调用快捷键option+command+c
, 调出generate code snippet
界面,我们可以选择Java,Python,Go等任意编程语言,我们以JS为例,在选择语言之后,会有fetch,Axios,XMLHttpRequest等多种编码风格,我们选择fetch。一段代(zhuan)码(tou)片段快速生成。
fetch("https://baidu.com/", {
"method": "GET",
"headers": {
"user-agent": "vscode-restclient"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.error(err);
});
不同的HTTP协议测试
随着HTTP2的逐渐,在某些场景中会测试不同的HTTP协议的是否连通,这个在Rest client中非常简单添加协议名称即可。
# Send Request
# 测试http1
GET https://baidu.com HTTP/1.1
# 测试http2
GET https://baidu.com HTTP/2
变量的编写
在实际restful接口的测试中,我们往往会编写十几个甚至几十个测试调用,在开发、测试、生产等各个环境中域名、端口、请求内容类型等配置必然各不相同,通过变量的统一编写,我们可以编写出干净、整洁、可配置的restful 测试脚本。
下面我们编写一个简单的开发环境案例:
@hostname = localhost
@port = 8080
@host = {{hostname}}:{{port}}
@contentType = application/json
@name = monkeyKing
###
GET https://{{host}}/authors/{{name}} HTTP/1.1
环境的切换
针对不同的环境,我们首先可以设置vscode编辑器环境。在.vscode文件夹下面添加settings.json文件:
{
"rest-client.environmentVariables": {
"$shared": {
"version": "v1"
},
"local": {
"version": "v2",
"host": "http://localhost:8000",
"token": "tokentokentokentoken1"
},
"prod": {
"host": "http://api.cloud-wave.cn",
"token": "tokentokentoken2"
}
}
}
之后我们就可以通过option +command+e
调出环境选项,随时切换环境。假设我们我的调试代码如下:
### 全局配置下的接口调用
GET https://{{host}}/authorsHTTP/1.1
content-type: application/json
Authentication:token {{token}}
通过切换环境,我们便可以随时调用不同的变量了。
私有权鉴下的restful接口调用
上面的restful接口调用都是public范畴的,在实际业务开发中显然没有那么简单。开发人员为确保接口的安全,通常都会对restful接口进行权鉴管理。对于private restful接口的调用,一般分为三种类型:
- Basic Auth;
- Digest Auth;
- SSL Client Certificates;
Basic Auth
这是最简单的权鉴管理方式,在HTTP 的请求头中的Authentication字段中带有一个权限token:
GET https://api.com/userinfo HTTP/2
Authorization: Basic dXNlcjpwYXNzd2Q=
Digest Auth
摘要授权和Basic Auth非常类似,但是其安全性比Basic Auth要更好:
GET https://api.com/userinfo HTTP/2
Authorization: Digest user passwd
SSL Client Certificates
在金融类的HTTPS请求,我们通常会使用客户端证书,我们以PEM证书为例,我们可以在settings.json
文件中添加如下证书配置:
{
...
"rest-client.certificates": {
"localhost:8081": {
"cert": "/Users/demo/Certificates/client.crt",
"key": "/Users/demo/Keys/client.key"
},
"cloud-wave.com": {
"cert": "/Users/demo/Certificates/client.crt",
"key": "/Users/demo/Keys/client.key"
}
}
}
总结
本文介绍了rest client的各种场景下的使用方法。希望对于前后端的朋友在实际工作中能提高大家的生产力。