现在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
// 导入vueimport Vue from 'vue'// 导入axiosimport 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>
作者：圆梦人生
链接：https://www.jianshu.com/p/c3d54c92bf39