14.axios使用

现在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>