怎么测试一个接口,postman?form?axios?
接口写出来之后,想要测试其正确性。最快速的方法莫过于postman,能脱离代码。当然前端还可以form表单提交或者利用axios。这里想说,当一个接口出来以后,根据其不同的content-type
,三种测试方式也有很大不同。
先说说content-type
请求头和响应头总会有content-type
,正如翻译内容类型
,请求的时候表示body里的内容类型,响应的时候表示返回体里的内容类型。
get请求的时候没有body,参数是拼接在接口地址后面的,所以get请求的时候,没有content-type
。
post请求的时候,如果有body,接口肯定有content-type
的值,而前端必须将请求头设置成相应的值,这样接口拿到正确的数据,不同的content-type
,前后端处理的方法很多时候也是不同的。当然如果后端兼容处理这几种方式,那么测试更加随意了~~
content-type
有很多类型,但是接口常用的是三种类型如下(如果有上传文件则只能用multipart/form-data
):
application/json
,此时前端传的body格式是{"a":1,"b":2}
application/x-www-form-urlencoded
,此时前端传的body格式是a=1&b=2
multipart/form-data
,此时前端传的body格式如下,每个表单项使用--[boundary]
分割开来,最后一行使用--[boundary]--
结尾,下面对应的就是{name:'huahua',file:文件流,}
------WebKitFormBoundary6VWyGefevm60vjtn Content-Disposition: form-data; name="name" huahua ------WebKitFormBoundary6VWyGefevm60vjtn Content-Disposition: form-data; name="file"; filename="study.md" Content-Type: text/markdown ------WebKitFormBoundary6VWyGefevm60vjtn--
application/json
当接口规定需要的content-type
为application/json
时
- 代码里可以
axios.post('/api/user',{a:1,b:2})
,axios会将对象自动变成json对象之后,发送出去,content-type也会因为第二个参数是对象,而自动变成application/json
,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = application/json
- postman里,使用的时候,如下图:,这里postman也会因为你选择
JSON
,而自动设置Content-Type = application/json
这里弱弱的说下后台app.use(bodyParser.json())
然后拿到的let {a,b} = req.body
application/x-www-form-urlencoded
当接口规定需要的content-type
为application/x-www-form-urlencoded
时
- 代码里可以
axios.post('/api/user',Qs.stringify({a:1,b:2}))
,stringify会将其变成a=1&b=2
,content-type也会因为第二个参数是字符串,而自动变成application/application/x-www-form-urlencoded
,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = application/x-www-form-urlencoded
,备注axios还可以在transformRequest处理,不细说了 - 代码里还可以form元素自动提交
<form method="post" action="/api/user"><input type="text" name="a"><input type="text" name="b"><button type="submit">提交</button></form>
,这里不需要设置enctype,因为其默认值就是application/application/x-www-form-urlencoded
- postman里,使用的时候,如下图:,这里postman也会因为你选择
x-www-form-urlencoded
,而自动设置Content-Type = application/x-www-form-urlencoded
这里弱弱的说下后台app.use(bodyParser.urlencoded({ extended: false }))
然后拿到的let {a,b} = req.body
。
multipart/form-data
当接口规定需要的content-type
为multipart/form-data
时,分为两种情况:没有上传文件和有上传文件
没有上传文件的时候
- 代码里可以
let formData = new FormData();formData.append('a',1);formData.append('b',2);axios.post('/api/user',formData)
,axios会自动将其变成加边界的形式,content-type也会因为第二个参数是formData,而自动变成application/multipart/form-data
,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = multipart/form-data
,备注axios还可以在transformRequest处理,不细说了 - 代码里还可以form元素自动提交
<form method="post" action="/api/user" enctype="multipart/form-data"><input type="text" name="a"><input type="text" name="b"><button type="submit">提交</button></form>
,这里必须设置enctype - postman里,使用的时候,如下图:,这里postman也会因为你选择
multipart/form-data
,而自动设置Content-Type = application/multipart/form-data
这里弱弱的说下后台let upload = multer();app.post('/formdata', upload.none(), (req, res)=> { let {a,b} = req.body;... })
,没有文件加上upload.none()
有上传文件的时候
- 代码里可以
let formData = new FormData();formData.append('a',1);formData.append('avatar',xx.files[0]);axios.post('/api/user',formData)
,axios会自动将其变成加边界的形式,content-type也会因为第二个参数是formData,而自动变成application/multipart/form-data
,无需额外设置。如果用的别的库,根据库看看是否需要设置请求头Content-Type = multipart/form-data
,备注axios还可以在transformRequest处理,不细说了 - 代码里还可以form元素自动提交
<form method="post" action="/api/user" enctype="multipart/form-data"><input type="text" name="a"><input type="file" name="avatar"><button type="submit">提交</button></form>
,这里必须设置enctype - postman里,使用的时候,如下图:,这里postman也会因为你选择
multipart/form-data
,而自动设置Content-Type = application/multipart/form-data
这里弱弱的说下后台let upload = multer({ dest: 'uploads/' });app.post('/formdata', upload.single('avatar'), (req, res)=> { let file= req.avatar;let {a,b} = req.body;... })
,文件暂存在uploads/
,multer的具体用法