現(xiàn)在vue發(fā)送ajax請求官方推薦使用axios抹凳，現(xiàn)在以13.Vue-Resource 使用案例用axios實現(xiàn)效果
axios 官網(wǎng)：https://github.com/axios/axios
效果
image.png
案例：
1.安裝axios
cnpm i axios -S
或者
npm i axios -S
2.在src下創(chuàng)建/axios/index.js
// 導(dǎo)入vue
import Vue from 'vue'
// 導(dǎo)入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">發(fā)送請求</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>
// 導(dǎo)入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('發(fā)送失敗');
console.log(error);
})
// 如果使用finally 請升級瀏覽器,該方法是 ES2018 引入標(biāo)準(zhǔn)的
/*.finally(f=>{
console.log('釋放資源操作,finally總是被執(zhí)行');
});*/
}
}
}
</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>
