前言
接口请求现在基本上是应用必备了, 各个请求库用了这么多年从来没出什么岔子.
不过最近却产生了一点疑惑, 为什么之前用的好好的POST方法访问新接口时提示传递参数为空呢? 为什么网络上的接口请求测试工具中有两种参数形式呢?
这是因为 http 请求头内的 content-type 不一样导致的 (used with POST and PUT requests)
HTTP 请求头/响应头简述
这里摘录几张图片
请求三要素:
响应三要素
这里只分析请求头的content-type, 请他的请参考 https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
header_content-type
根据应用场景的不同,HTTP请求的请求体有三种不同的形式, 通过header中的content-type指定, 这里只分析两个:
1. application/x-www-form-urlencoded(默认类型)
如果不指定其他类型的话, 默认是x-www-form-urlencoded
, 此类型要求参数传递样式为 key1=value1&key2=value2
2. application/json
更适合传递大数据的形式, 参数样式就是json格式, 例如{"key1":"value1","key2":[1,2,3]}
等.
常见网络请求工具的两种请求方式的写法
1. React-fetch
application/x-www-form-urlencoded
let formData = new FormData(); formData.append("key", "value"); fetch(url, { method: "POST", credentials: "include", body: formData, headers: { 'content-type': 'application/x-www-form-urlencoded' // 或者不填 }, }).then(...)
application/json
let modelData= new ModelData(); fetch(url, { method: "POST", credentials: "include", body: JSON.stringify(modelData), headers: { 'content-type': 'application/json' }, }).then(...)
2. Retrofit
application/x-www-form-urlencoded
@FormUrlEncoded @POST(url) fun getData(@Field("key") value: String): Observable<ResponseModel>
application/json
@POST(url) @Headers("Content-Type:application/json;charset=UTF-8") fun postTest(@Body body: PostData): Observable<ResponseModel>
3. OkGo
application/x-www-form-urlencoded
OkGo.<ResponseModel>post("http://asset.cns.com.cn/mobilescandim") .params("key1", "value1") .params("key2", "value2") .execute();
application/json
OkGo.<ResponseModel>post("http://asset.cns.com.cn/mobilescandim") .upJson("PostData对象的json字符串") .execute();
4. 网络接口请求测试工具
-
application/x-www-form-urlencoded
需要采用单独添加参数的方式
-
application/json
批量添加参数
附两张接口抓包截图
注意其中的 Content-Type
-
普通接口的Request:
-
上传文件接口的Request