9. axios发送请求
Axios 是基于 promise 对Ajax的封装
9.0. axios的引入：
和Vue一样，对于初学者，推荐使用cdn形式引入：
<head>
<meta charset="UTF-8">
<title>axios</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
9.1. axios的基本使用：
发送请求时，url 是必选的配置，此外可选配置有baseURL、methods、data、params、timeout等等
具体可以查看官网：axios官网介绍
9.1.1. axios发送get请求
@RequestMapping(value = "axios")
public String axios() {
return "axios";
}
@RequestMapping(value = "/test/axiosGet")
@ResponseBody
public String axiosGet(HttpServletRequest request) {
String name = request.getParameter("name");
System.out.println("-------------------name: " + name);
return "axiosGet";
}
<div id="test-axios">
<button @click="axiosGetOne">axiosGetOne</button>
</div>
<script>
new Vue({
el: '#test-axios',
methods: {
axiosGetOne: function () {
axios({
url: '/axiosGet',
baseURL: '../test', //`baseURL` 会被加到`url`前面，除非`url`已经写全了。
method: 'get', //默认也是get请求
params: {
id: 1,
name: 'zhangsan'
}
}).then(function (response) {
// 请求成功处理
console.log(response.data); //data即后端返回的数据"axiosGet"
}).catch(function (error) {
// 请求失败处理
console.log(error);
});
}
}
});
</script>
后端控制器打印zhangsan；页面控制器输出axiosGet
发送有参get请求，使用params来发送参数；当然对于get请求，参数也可以携带在url上/test/axiosGet?id=1&name=zhangsan
9.1.2. axios发送post请求：
【使用data传递参数】：
参数在data中携带，请求虽然能成功，但是后端获取不到请求数据
·
那是因为axios发送post请求时，默认发送的是json格式的数据，后端request.getParameter和@RequestParam是获取不到的
@RequestMapping(value = "/test/axiosPost", method = RequestMethod.POST)
@ResponseBody
public String axiosPost(HttpServletRequest request) {
String id = request.getParameter("id");
System.out.println("-------------------id: " + id);
return "axiosPost";
}
<div id="test-axios">
<button @click="axiosGetOne">axiosGetOne</button>
<button @click="axiosPost">axiosPost</button>
</div>
<script>
new Vue({
el: '#test-axios',
methods: {
axiosPost: function () {
axios({
url: '/axiosPost',
baseURL: '../test',
method: 'post',
data: {
id: 1,
name: 'zhangsan'
}
}).then(response => {
// 请求成功处理
console.log(response.data); //data即后端返回的数据"axiosPost"
}).catch(error => {
// 请求失败处理
console.log(error);
});
}
}
});
</script>
请求发送的是json格式的数据，后端
request.getParameter无法获取参数，当然，后端用@RequestBody注解的(实体类或Map)还是可以接收到的
当然，我们不可能每个请求都去封装个实体类，那怎么办呢？往下看⬇
@RequestMapping(value = "/test/axiosPostBean", method = RequestMethod.POST)
@ResponseBody
public String axiosPostBean(@RequestBody User user) {
System.out.println("-------------------id: " + user.getId());
return "axiosPost";
}
【使用params传递参数】：
上述问题，当我们使用params来传递参数，post请求成功，并且后端能够获取数据
·
那是因为使用params，将请求参数都已键值对的形式拼接到url上了，但它还是POST请求
【使用URLSearchParams封装来传递参数】：
使用URLSearchParams，参数不会拼接到url，后端可以
request.getParameter获取参数
<script>
var params = new URLSearchParams();
params.append('id', 1);
params.append('name', 'zhangsan');
new Vue({
el: '#test-axiosPost',
methods: {
axiosPostOne: function () {
axios({
url: '/axiosPost',
baseURL: '../test',
method: 'post',
data: params
}).then(response => {
// 请求成功处理
console.log(response.data); //data即后端返回的数据"axiosGet"
}).catch(error => {
// 请求失败处理
console.log(error);
});
},
}
});
</script>
9.2. axios使用别名发送请求：
axios支持使用别名发送所有类型的请求，如axios.get()、axios.post、axios.put()等等
9.2.1. axios.get()发送get请求
axios.get(url,{config})，和axios基本用法中差不多。
<div id="test-axiosInstance">
<button @click="axiosGetOne">axiosGetOne</button>
</div>
<script>
new Vue({
el: '#test-axiosInstance',
methods: {
axiosGetOne: function () {
axios.get('../test/axiosGet', {
params: {
id: 1,
name: 'zhangsan'
}
timeout: 5000
}).then(response => {
// 请求成功处理
console.log(response.data); //data即后端返回的数据"axiosGet"
}).catch(error => {
// 请求失败处理
console.log(error);
});
},
}
});
</script>
9.2.2. axios.post()发送post请求
axios.post(url,{data},{config})，和axios基本用法中差不多。但是参数要使用"id=1&name=‘zhangsan’"键值对的形式传递
这种形式，参数不会拼接在url
<div id="test-axiosInstance">
<button @click="axiosPost">axiosPost</button>
<button @click="axiosPostBean">axiosPostBean</button>
</div>
<script>
new Vue({
el: '#test-axiosInstance',
methods: {
axiosPost: function () {
axios.post('../test/axiosPost', "id=1&name='zhangsan'")
.then(response => {
// 请求成功处理
console.log(response.data); //data即后端返回的数据"axiosPost"
})
},
axiosPostBean: function () {
axios.post('../test/axiosPostBean', {
id: 1,
name: 'zhangsan'
}, {
timeout: 5000 //请求超时时间
}
).then(response => {
// 请求成功处理
console.log(response.data); //data即后端返回的数据"axiosPost"
})
}
}
});
</script>
@RequestMapping(value = "/test/axiosPostBean", method = RequestMethod.POST)
@ResponseBody
public String axiosPostBean(@RequestBody User user) {
System.out.println("-------------------id: " + user.getId());
return "axiosPost";
}
参数不使用键值对的形式，仍然使用data形式，同axios基本用法中一样，后端要用@RequestBody注解的(实体类或Map)接收才能获取参数
9.3. axios使用小总结：
// 请求参数为键值对，后端可以使用request.getParamter或@requestParam获取参数
// 请求为json数据，后端使用@RequestBody注解的(实体类或Map)获取参数
// get请求发送的时键值对参数，post请求发送的是json格式参数
// axios基本格式使用中，post请求参数使用params来发送，参数会拼接到url；或者使用URLSearchParams来封装参数传递，后端都能使用request.getParamter获取参数
// axios.post发送post请求，参数采用params来发送，参数不会拼接url，后端都能使用request.getParamter获取参数
推荐使用简写的axios.post发送post请求，参数采用{id:1,name:‘zhangsan’}这个对象格式发送
9.4. axios的全局配置：
全局配置就是所有的axios都使用配置，一般将请求的一些共有设置进行全局配置，如timeout、baseURL等
axios.default.baseURL = "../test"
axios.default.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.get(...,...);
当然，对于配置的优先级，请求中的配置>axios实例的配置>全局配置
9.5. axios的实例配置：
axios.get()等使用的时默认的实例，当然我们可以通过axios.create来创建符合场景实例，在实例中可以对实例配置
<script>
// 创建实例时设置默认配置
const instance = axios.create({
baseURL: '../test',
timeout: 3000
});
// 实例创建后还可以更改配置
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 实例发送请求
instance.get(..,..)
</script>
9.6. axios的拦截器：
可以拦截请求或者响应在他们被 then 或 catch 处理之前。
请求拦截器：请求之前进行拦截;axios.interceptors.request.use(成功函数，失败函数)
<script>
axios.interceptors.request.use(config => {
console.log(config)
console.log(config.params)
return config;
}, err => {
console.log(err)
});
</script>
响应拦截器：请求成功响应之前进行拦截;axios.interceptors.response.use(成功函数，失败函数)
<script>
axios.interceptors.response.use(config => {
console.log("----: " + config.data)
return config.data;
}, err => {
console.log("====:" + err
)
});
</script>