10-vue-axios异步实现数据获取
axios是什么
axios是"一个基于promise的 发送http请求的"一个工具库，可以用在浏览器和node.js中。
特点
axios是一个“异步请求”技术
支持Promise API
拦截请求和响应。拦截请求，可以过滤请求参数；拦截响应，可以处理响应异常
取消请求。请求可以手动取消
异步请求
基于 XMLHttpRequest对象 发起的请求 都是异步请求。
异步请求的特点
请求之后页面不动（不刷新），响应回来 更新的是 页面的局部，多个请求之间互不影响，并行执行。
ajax是用来发送异步请求的。
axios是ajax封装的库，用于异步请求接口数据，和vue没什么关联，但是多用于Vue全家桶中。
在vue项目中需要用到axios进行接口请求，并将 返回的内容 传递到 vue的data数据中心 中。
vue框架，使用axios
axios中文文档
http://www.axios-js.com/zh-cn/docs/
axios是干什么的
axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要额外使用一个通信框架与服务器交互；当然也可以使用jQuery提供的AJAX通信功能。
一、axios的基本使用
安装和引入
npm install 模块名称（依赖包） --save
npm install axios --save //项目中安装
npm i axios --save
或
cnpm install axios --save
引入axios的相关依赖
<script src="js/axios.js"></script>
或使用cdn使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
例如：
搭建 网易云音乐nodejs项目
NeteaseCloudMusicApi-master ----源码
搭建步骤：
（1）下载并初始化依赖包
npm install
（2）运行
node app.js
一.axios.get()方式请求 在vue中读取远程接口数据 的方法 -----------------------------------
例如1：访问网易云音乐接口地址
接口地址：获取banner的接口地址 /banner
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="getBanner">点击发送异步请求</button>
<ul>
<li v-for="(item,index) in banners">
<img v-bind:src="item">
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
banners:[]
},
methods: {
getBanner:function(){
// 接口地址
let apiUrl = 'http://localhost:3000/banner';
axios.get(apiUrl).then((response)=>{
console.log(response);
if(response.status === 200){
let list = response.data.banners;
// console.log(list);
// 对list进行遍历，在遍历的过程当中，将它里面的每一项数据上的imageUrl这个信息，放置到数据中的banners里面去！
list.forEach((item)=>{
console.log(item.imageUrl);
this.banners.push(item.imageUrl)
})
console.log(this.banners);
}else{
console.log('无数据');
}
}).catch((error)=>{
console.log(error);
})
}
},
components: {
}
});
</script>预览效果，如下所示：
例如2：axios获取天气API数据
获取天气接口地址：http://wthrcdn.etouch.cn/weather_mini?city=
<!-- 引入核心css文件 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<!-- 引入核心js文件 -->
<script src="./bootstrap/js/jquery-3.3.1.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<h3 class="text-center">axios获取天气API数据</h3>
<div class="container">
<input v-model="city" class="form-control" style="width:400px;float:left;margin-right:10px;" type="text" name="" id="" placeholder="北京">
<button type="button" class="btn btn-primary" @click="getInfo">查询</button>
</div>
<h3 class="text-center" v-if="center!=''">
{{center}}----{{ganmao}}
</h3>
<table class="table table-hover">
<thead>
<tr>
<th>星期</th>
<th>最高气温</th>
<th>最低气温</th>
<th>风向</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<th scope="row">{{item.date}}</th>
<td>{{item.high}}</td>
<td>{{item.low}}</td>
<td>{{item.fengxiang}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
city:'',
center:'',
ganmao:'',
list:[]
},
methods: {
getInfo:function(){
// 接口地址：http://wthrcdn.etouch.cn/weather_mini?city=
if(this.city==''){
this.city = '北京';
}
let apiUrl = 'http://wthrcdn.etouch.cn/weather_mini?city='+this.city;
// 发送请求
axios.get(apiUrl).then((response)=>{
console.log(response);
// (1)
this.ganmao = response.data.data.ganmao;
// (2) 获取 响应数据中的forecast数组上的数据，把这个数据，赋值给 数据中心data里的list空数组中
this.list = response.data.data.forecast;
// (3) 获取 响应数据中的city的值，赋值给 数据中心data里的center
this.center = response.data.data.city;
// (4) 所有的事情，操作完毕后，把 input文本框中的输入的文本，清空，方便你下次输入内容
this.city = '';
}).catch((error)=>{
console.log(error);
})
}
},
components: {
}
});
</script>预览效果，如下所示：
2.在vue中读取本地Json文件的 方法 ----------------------------------------
例如1：
点击按钮，获取data中json文件中的数据
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="getCate">访问data中分类数据</button>
<div class="nav">
<ul>
<li v-for="(item,index) in cateList">{{item}}</li>
</ul>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
cateList:[]
},
methods: {
getCate:function(){
let apiUrl = './data/Category.json';
axios.get(apiUrl).then((response)=>{
if(response.status==200){
this.cateList = response.data.data;
}else{
console.log('无数据');
}
}).catch((error)=>{
console.log(error);
})
},
},
components: {
}
});
</script>预览效果，如下所示：
例如2：
还没有留言，还不快点抢沙发？