Vue+axios网络请求的一个简单案例

Vue+axios网络请求的一个简单案例

首先看看返回的json数据结构：

html代码：

<div id="app">
			<div v-for="infos in info">//循环输出相应的数据
				{{infos.id}} {{infos.post_excerpt}} {{infos.post_title}}
				<!--<img :src="直接写路径参数，什么都不用加">-->
				<img :src="infos.thumbnail">
			</div>
		</div>

js代码：

<script>
			new Vue({
				el: '#app',
				data() {
					return {
						info: [] //把返回的数据储存为数组形式
					}
				},

				methods: {
					getData() {
						var self = this;
						axios.post('API URL')
							.then(function(response) {
								console.log(response.data);//在控制台打印获取的数据，方便查阅
								self.info = response.data;
							})
							.catch(function(error) {
								console.log("获取数据失败！" + error);
							});
					}
				},
				mounted() {
					this.getData();
				}

			})
		</script>

Vue+axios网络请求写法有很多种，这里就只介绍一种比较简单的写法；写法的简单与否取决于业务逻辑的简单与否。