現(xiàn)在vue發(fā)送ajax請(qǐng)求官方推薦使用axios，現(xiàn)在以13.Vue-Resource 使用案例用axios實(shí)現(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實(shí)例中(代碼中直接使用 this.$axios)
Vue.prototype.$axios = Axios;

3.src/page/axios/index.vue

<template>
  <div>
    axios案例：<br/><br/>
    <button @click="doRequest">發(fā)送請(qǐng)求</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 請(qǐng)升級(jí)瀏覽器,該方法是 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>