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

// 导入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