axios的根本利用 - ToB企服应用市场:ToB评测及商务社交产业平台

[
{"id":1,"name": "小明", "age": 13, "gender": "男"},
{"id":2,"name": "小红", "age": 13, "gender": "女"},
{"id":3,"name": "小绿", "age": 4, "gender": "男"},
{"id":4,"name": "小翠", "age": 14, "gender": "女"}
]

复制代码

//发送GET方式请求
axios.get("url")
.then(function(response){ //处理响应
console.log(response.data);
}).catch(function(err){//捕获异常
console.log(err);
});

复制代码

<button @click="test">点击</button>
new Vue({
el:"#app",
methods:{
test(){
axios.get("http://localhost:8080/axios-test/users.json").then(function(response){ //得到成功的响应，状态码200，执行then中的内容
console.log(response.data);
}).catch(function(err){
console.log(err);
});
}
}
});

复制代码

//1. 使用params发送请求参数
axios.get("url",{params:{/*请求参数*/}}).then(function(response){
console.log(response.data);
}).catch(function(err){
console.log(err);
});
注意:get方式发起请求如果携带参数，参数会以k=v形式拼接在url中。
1.多对数据之间使用&连接
2.请求参数和请求地址使用?连接
//2. 直接拼接k=v参数到url
axios.get("url?k1=v1&k2=v2").then(function(response){
console.log(response.data);
}).catch(function(err){
console.log(err);
});

复制代码

axios.get("http://localhost:8080/axios-test/users.json",{params:{name:"xiaohei",age:18}})
.then(function(response){//得到成功的响应，状态码200，执行then中的内容
console.log(response.data);
}).catch(function(err){
console.log(err);
});
axios.get("http://localhost:8080/axios-test/users.json?name=xiaohei&age=18")
.then(function(response){ //得到成功的响应，状态码200，执行then中的内容
console.log(response.data);
}).catch(function(err){
console.log(err);
});

复制代码

//发送POST方式请求
axios.post("url").then(function(response){//处理响应
console.log(response.data); //响应成功后，进入这里
}).catch(function(err){//捕获异常
console.log(err); //响应失败后，进入这里
});

复制代码

axios.post("http://localhost:8080/axios-test/users.json")
.then(function(response){//处理响应
console.log(response.data); //响应成功后，进入这里
}).catch(function(err){//捕获异常
console.log(err); //响应失败后，进入这里
});

复制代码

<script>
test6(){
axios.post("http://localhost:8080/axios_test/users.json",'name=cpx&age=20')
.then(function(response){//处理响应
console.log(response.data); //响应成功后，进入这里
}).catch(function(err){//捕获异常
console.log(err); //响应失败后，进入这里
});
},
test7(){
//axios.post("http://localhost:8080/axios_test/users.json",{name:'cpx',age:20})
let u = {name:'cpx',age:20};
let {name,age} = u;
let data = `name=${name}&age=${age}`;
axios.post("http://localhost:8080/axios_test/users.json",data)
.then(function(response){//处理响应
console.log(response.data); //响应成功后，进入这里
}).catch(function(err){//捕获异常
console.log(err); //响应失败后，进入这里
});
}
</script>
<!--
需要额外引入qs.js，完成json对象转换k=v参数对
-->
<script src="js/qs-6.9.4.js"></script>
<script>
//发送POST方式请求
axios.post("url",Qs.stringify({/*请求参数*/}).then(function(response){
console.log(response.data); //成功响应进入这里
}).catch(function(err){
console.log(err); //失败响应进入这里
});
</script>

复制代码

axios.post("http://localhost:8080/axios-test/users.json",Qs.stringify({name:"xiaohei",age:18}))
.then(function(response){//处理响应
console.log(response.data); //响应成功后，进入这里
}).catch(function(err){//捕获异常
console.log(err); //响应失败后，进入这里
});

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue-2.6.12.js"></script>
<script src="js/axios-0.21.0.js"></script>
<script src="js/qs-6.9.4.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<td>
<input type="button" value="删除选中" @click="removeChecked">
</td>
<td>
姓名
</td>
<td>
年龄
</td>
<td>
性别
</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(u,index) in users" :key="u.id">
<td>
<input type="checkbox" name="id" id="" :value="u.id" v-model="checked">
</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.gender}}</td>
<td>
<a href="" @click.prevent="remove(u.id)">删除</a>
<a href="">更新</a>
</td>
</tr>
<tr>
<td colspan="5">
<input type="button" value="全选" @click="selectAll()">
<input type="button" value="全不选" @click="unselectAll()">
<input type="button" value="反选" @click="reverseSelect()">
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
users:[],
checked:[1]
},
methods:{
selectAll(){
this.checked = this.users.map(u=>u.id);
},
unselectAll(){
this.checked = [];
},
reverseSelect(){
this.checked = this.users.map(u=>u.id).filter(id=>this.checked.indexOf(id)<0);
},
remove(id){
// alert(index);
let index = this.users.map(u=>u.id).indexOf(id);
if(index < 0){
return;
}
this.users.splice(index,1);
},
removeChecked(){
for(let i = 0; i < this.checked.length;i++){
this.remove(this.checked[i])
}
}
},
created:function(){
axios.get("http://localhost:8080/axios-test/users.json")
.then(resp=>{
this.users = resp.data;
}).catch(error=>{
console.log(error);
})
}
})
</script>
</body>
</html>

复制代码