axios是一个基于promise的HTTP客户端,它的主要特点如下:
- 从浏览器中创建XMLHttpRequest
- 从node.js发出HTTP请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
引入方式
使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或者:
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
使用npm
npm install axios
Get请求和Post请求
使用axios发送Get和Post请求分别有两种格式:
格式一:
//Get请求
axios({
method:'get', //请求方式
url:'XXX.XXX', //请求路径
params:{name:'蔡某坤',sex:'gay',hobby:'rap'} //发送的数据
})
.then(function(response){
//请求成功,处理业务逻辑
})
.catch(function(error){
//请求失败,处理业务逻辑
})
//Post请求
axios({
method:'post', //请求方式
url:'XXX.XXX', //请求路径
data:'name=蔡某坤 & sex=gay' //发送的数据
})
.then(function(response){
//请求成功,处理业务逻辑
})
.catch(function(error){
//请求失败,处理业务逻辑
})
格式二:
//Get请求
axios.get('请求路径',{
params:{ //发送的数据
name:'蔡某坤',
sex:'gay',
hobby:'basketball'
}
})
.then(function(response){
//请求成功,处理业务逻辑
})
.catch(function(error){
//请求失败,处理业务逻辑
})
//Post请求
axios.post('请求路径','name=蔡某坤 & sex=gay')
.then(function(response){
//请求成功,处理业务逻辑
})
.catch(function(error){
//请求失败,处理业务逻辑
})
回调接收,.then方法用于处理请求成功的回调函数,.catch方法用于处理请求失败的回调函数。
这两个回调函数都有各自独立的作用域,直接在函数内部使用this并不能访问到Vue实例,这时只需要在回调函数的后面添加 .bind(this) 就能解决这个问题,或者将其内部函数改为 response => ()的格式。
使用示例:
<div id="element">
<p>{{name}}</p>
<p>{{motto}}</p>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
//创建根实例
var demo = new Vue({
el: '#element',
data: {
name: '',
motto: ''
},
mounted: function () {
axios({
method: 'get',
url: 'http://60.205.187.0/vue/test.php',
params: { name: '蔡某坤', sex: 'gay', hobby: 'rap' }
})
.then(
function (response) {
this.name = response.data.name;
this.motto = response.data.motto;
}.bind(this) //如果不加.bind(this)无法访问实例的数据
)
.catch(function (error) {
console.log(error)
})
// axios.post('http://60.205.187.0/vue/test.php', 'name=蔡某坤 & sex=gay')
// .then(response => ( //如果不使用response=>()的方式则无法访问Vue实例
// this.name = response.data.name,
// this.motto = response.data.motto
// ))
// .catch(function (error) {
// console.log(error)
// })
// }
})
</script>
对应的php文件:
<?php
header('Access-Control-Allow-Origin:*');
$methodName = strtolower($_SERVER['REQUEST_METHOD']);
if ($methodName == "options") {
exit;
}
$result=( array('code'=>'1','message'=>'success','name'=>'真ikun粉丝','motto'=>'就算是全世界的人都在黑蔡某坤,我也会义无反顾地站在全世界这边') );
echo json_encode($result,JSON_UNESCAPED_UNICODE);
?>