Vue—Axios 基本使用

Vue—Axios 基本使用

Axios 基本使用

引言

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax

Axios 第一个程序

中文网站:

安装: .min.js

下载:

npm install axios --save

GET方式的请求

//发送GET方式请求("localhost:8989/user/findAll?name=xiaochen").then(function(response){console.log(response.data);}).catch(function(err){console.log(err);});

POST方式请求

//发送POST方式请求axios.post("localhost:8989/user/save",{username:"xiaochen",age:23,email:"xiaochen@zparkhr",phone:13260426185}).then(function(response){console.log(response.data);}).catch(function(err){console.log(err);});

axios并发请求

并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

//1.创建一个查询所有请求function findAll(){("localhost:8989/user/findAll?name=xiaochen");}//2.创建一个保存的请求function save(){return axios.post("localhost:8989/user/save",{username:"xiaochen",age:23,email:"xiaochen@zparkhr",phone:13260426185});}//3.并发执行axios.all([findAll(),save()]).then(axios.spread(function(res1,res2){  //用来将一组函数的响应结果汇总处理console.log(res1.data);console.log(res2.data);}));//用来发送一组并发请求

案例

<div id="app"><input type="text"  v-model="name" @keyup.delete="shows" &#="searchCity"/> <input type="button" value="搜索" @click="searchCity"/> <br><span v-for="city in hotCitys"><a href="" @click.prevent="searchCitys(city)">{{ city }}</a> &nbsp;</span><hr><span v-show="isShow">{{ name }},今天的天气是: {{ message }} </span></div>
<!--引入vue-->
<script src=".js"></script>
<!--引入axios-->
<script src=".min.js"></script>
<script>const app = new Vue({el: "#app",data: {name:"",hotCitys:["北京","上海","广州","深圳"],message:"",isShow:false,},methods: {searchCity(){//获取输入的城市信息let _this = this;//发送axios请求("localhost:8989/city/find?name="+this.name).then(function (response) {console.log(ssage);_ssage = ssage;_this.isShow = true;}).catch(function (err) {console.log(err);});},searchCitys(name){this.name = name;this.searchCity();//函数中调用函数},shows(){this.isShow = false;}}});
</script>