怎么测试一个接口,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-typeapplication/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-typeapplication/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-typemultipart/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()

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章