现在vue发送ajax请求官方推荐使用axios，现在以13.Vue-Resource 使用案例用axios实现效果
axios 官网：https://github.com/axios/axios
效果
image.png
案例：
1.安装axios
cnpm i axios -S
或者
npm i axios -S
2.在src下创建/axios/index.js
// 导入vue
import Vue from 'vue'
// 导入axios
import Axios from 'axios'
// 挂载到vue实例中(代码中直接使用 this.$axios)
Vue.prototype.$axios = Axios;
3.src/page/axios/index.vue
<template>
<div>
axios案例：<br/><br/>
<button @click="doRequest">发送请求</button>
<br/><br/>
<ul>
<li v-for="(result, index) in list" :key="index">
<div class="ui-flex">
<div>
<img :src="result.album.blurPicUrl" width="100px" height="100px;"/>
</div>
<div class="ui-flex-1">
歌曲：{{result.name}} <br>
歌手：{{result.artists[0].name}} <br>
所属公司：{{result.album.company}}
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
// 导入axios
import axios from '@/axios'
export default {
data(){
list: undefined
},
methods: {
doRequest(){
var url = '/wymusic?id=19723756';
this.$axios.get(url).then((response)=>{
this.list = response.data.result.tracks;
}).catch(error=>{
console.log('发送失败');
console.log(error);
})
// 如果使用finally 请升级浏览器,该方法是 ES2018 引入标准的
/*.finally(f=>{
console.log('释放资源操作,finally总是被执行');
});*/
}
}
}
</script>
<style scoped>
.ui-flex {
display: -webkit-box;
display: box;
margin-bottom: 5px;
}
.ui-flex-1 {
-webkit-box-flex: 1;
text-align: left;
padding-left: 30px;
}
</style>
