数据类型
方法 |
内容类型(Content-Type) |
编码方式 |
GET |
\ |
Query String Parameters |
POST |
application/json |
Request Payload |
POST |
application/x-www-form-urlencoded |
Form Data |
POST |
multipart/form-data |
Form Data |
GET方法请求的参数默认是直接拼接在url后面的,Content-Type
是无法进行修改的。
POST方法Content-Type
的修改方式:
- 指定全局默认请求头:
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
- 直接在请求中指定:
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
前端发送
axios官方文档
GET
GET请求的Content-Type
默认为:application/json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| axios.get('/user?id=999&name=ahzoo') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
axios.get('/user', { params: { id: 999, name: 'ahzoo', } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
|


POST
application/json
1 2 3 4 5 6 7 8 9 10 11
| axios .post('/api/ahzoo', { id: 999, name: 'ahzoo', }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
|

可以看到数据在payload(负载)中,且数据格式为JSON:

1 2 3 4 5 6 7 8 9 10 11
| let formData = new FormData(); formData.append('id', 999); formData.append('name', 'ahzoo); axios .post('/api/ahzoo', formData) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
|


方式一:
1 2 3 4 5 6 7 8 9 10 11
| let param = new URLSearchParams(); param.append('id', 999); param.append('name', 'ahzoo'); axios .post('/api/ahzoo', param) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
|


方式二:
使用QS,官方地址(axios自带qs库,无需再次安装)
qs是查询字符串解析和将对象序列化的库,qs的两个主要使用方法:
qs.stringify()
:将对象序列化成url的形式,以&
进行拼接
qs.parse()
:将url解析成对象形式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| axios .post( '/api/ahzoo', qs.stringify({ id: 999, name: 'ahzoo' }) ) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error);
});
|


对象嵌套
使用默认的方式传递数据时,如果参数为对象,是需要将对象序列化操作的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| let user = { username: '十玖八柒', url: 'ahzoo.cn',
}; let param = new URLSearchParams(); param.append('id', 999); param.append('name', 'ahzoo'); param.append('user', JSON.stringify(user)); axios .post('/api/ahzoo', param) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
|
后端接收到的也是序列化后的对象,也就是json数据:

而使用QS序列化的话,是不用再将参数中的对象序列化的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| axios .post( '/api/ahzoo', qs.stringify({ id: 999, name: 'ahzoo', user: user }) ) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
|
后端可以直接从Paramer
中通过获得参数名为对象[属性]
的方式(示例:get("user[url]")
)获取数据

并发请求
执行多个并发请求:
1 2 3 4 5 6 7 8 9 10 11 12
| function getUserAccount() { return axios.get('/user/12345'); }
function getUserPermissions() { return axios.get('/user/12345/permissions'); }
axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { }));
|
默认配置
1 2 3
| axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
拦截器
在请求或响应被 then
或 catch
处理前拦截它们。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| axios.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.reject(error); });
axios.interceptors.response.use(function (response) { return response; }, function (error) { return Promise.reject(error); });
|
移除拦截器:
1 2
| const myInterceptor = axios.interceptors.request.use(function () {}); axios.interceptors.request.eject(myInterceptor);
|
说明
关于一些自定义操作,请移步官方文档
后端接收
Query String Parameters
和Form Data
在后端的接收方式一样
方式一:
在Request
中拿到对应的Parameter
数据
1 2 3 4 5 6 7 8 9 10 11
| import javax.servlet.http.HttpServletRequest;
......
@RequestMapping("api/ahzoo") public void toGetInfo(HttpServletRequest request){ String id = request.getParameter("id"); String name = request.getParameter("name"); System.out.println(id); System.out.println(name); }
|

方式二:
直接使用对应的参数名或者实体类拿到Request中的数据:
1 2 3 4 5 6
| @RequestMapping("api/ahzoo") public void toGetInfo(String name, String id){
System.out.println(id); System.out.println(name); }
|

1 2 3 4 5
| @RequestMapping("api/ahzoo") public void toGetInfo(Info info){
System.out.println(info); }
|

Request Payload
因为参数是直接放在请求体(Payload Body
)中,所以需要从请求体中拿到数据:
使用@RequestBody
注解从请求体中拿到数据,同样也是可以使用对应的实体类或参数接收
1 2 3 4 5 6 7
| import org.springframework.web.bind.annotation.RequestBody;
...... @RequestMapping("api/ahzoo") public void toGetInfo(@RequestBody Info info){ System.out.println(info); }
|

1 2 3 4 5
| @RequestMapping("api/ahzoo") public void toGetInfo(@RequestBody String id, @RequestBody String name){ System.out.println(name); System.out.println(id); }
|

由于参数是JSON格式的,所以还可以使用集合接收:
1 2 3 4 5 6 7 8 9
| @RequestMapping("api/ahzoo") public void toGetInfo(@RequestBody HashMap<String,String> info){
String id = info.get("id"); String name = info.get("name");
System.out.println(id); System.out.println(name); }
|

对象嵌套
接收序列化的对象:
和接收普通的参数一样,用字符串类型数据接收,或者直接从Paramer中获取
1 2 3 4 5 6 7
| @RequestMapping("api/ahzoo") public void toGetInfo(String id, String name, HttpServletRequest request) {
String user= request.getParameter("user"); System.out.println(name); System.out.println(id); }
|

接收QS传递的对象:
1 2 3 4 5 6 7 8
| @RequestMapping("api/ahzoo") public void toGetInfo(String id, String name, HttpServletRequest request) {
String username = request.getParameter("user[username]"); String url = request.getParameter("user[url]"); System.out.println(name); System.out.println(id); }
|
