Vue 封装axios

引入axios

cnpm install axios -S

新建一个文件夹api在这个文件夹下创建

request.js

import axios from 'axios';
//初始的封装
const api=axios.create({
    baseURL:'http://localhost:3000',
    timeout:3000
})
export default api

user.js里面存放用户的操作

 import api from './request'
	//查询所有信息
 export function select(params) {
     return api.get(params)
 }

在vue中引用该接口

<template>
  <div>

      <h4 v-for="(item,index) in songs" :key="index">
        {{item.name}}
        <img :src="item.al.picUrl" :alt="item.name" style="width:100px;height:100px">
        </h4>
  </div>
</template>

<script>
  import {select} from '../../network/user'
export default {
    name:'SonClass',
    data(){
      return{
      }
    },
    mounted(){
        select('/artist/top/song?id=6452').then(res=>{
        console.log(res.data);
        this.songs=res.data.songs
      }).catch(err=>{
        console.log(err);
      })
    },
   
    }
}
</script>

<style>

</style>