对axios进行的二次封装：

首先，我们要知道为什么要二次封装axios？

axios是一个基于promise的HTTP请求库，方便我们进行网络请求。
二次封装，便于我们更好的管理我们的接口，不至于请求接口很多的情况下，出现混乱。

接下来，我们将针对vue项目进行axios简单的二次封装。

首先，先在项目中下载axios插件

$ npm install axios

在src文件下创建一个文件夹api
在文件里创建一个api.js文件；

在api.js文件中进行以下操作：

1.导入将刚下载好的axios文件

import axios from ‘axios’

2.在项目中根目录下的vue.confin.js文件中配置以下：

// vue.config.js
// webpack开发者自己写的配置，vue-cli会把开发者写的配置合并到内置的webpack配置中。 
module.exports = {
  publicPath: '/',
  devServer: {
      proxy: {
      	//以api开头的请求会进行代理。
          '/api': {  
              target: 'http://127.0.0.1:7001',//你需要代理的地址
              changeOrigin: true,//是否允许跨域？true为允许。
              pathRewrite: {
                '^/api': ''
                //路径重写 请求时将api,不需要路径重写时可以把最后三行注释掉
              }
          }
      }
  }
}

3.利用axios对象的方法create，去创建一个axios实例;

api就是axios，只不过稍微配置了一下;

const api=axios.create({
    //配置对象
    //基础的axios地址
    baseURL:'/api',
    //超过的时间
    // timeout:5000,
    // headers:{'X-Custom-Hwader':'foobar'}
})

4.先执行请求拦截器，再执行响应拦截器;

原因：前端进行请求，后端才能根据请求的内容作出响应;

(1).添加请求拦截器===>前端给后端的参数（还没到后端响应）;

api.interceptors.request.use((config)=>{
    //在发送请求之前做些什么
    //例举：用户的登录状态
    //登录的判断，如果用户是登录状态，会在headers中把用户的token传递给后端
    //config是个配置对象，对象里面有一个属性很重要，headers请求头
    return config;
},(error)=>{
    return Promise.reject(new Error('faile'))
})

(2).添加响应拦截器===>后端给前端的数据（后端返回给前端）

api.interceptors.response.use((response)=>{
    //以2开头的状态码都会触发该函数。
    //对响应数据做点什么
    //后端给前端数据的时候，会有code码
    return response
},(error) => {
    return Promise.reject(new Error('faile'))
})

5.完成以上步骤，就可以对axios进行二次封装

export async music('参数'){
	return await api.get('需要获取的相应接口位置')；
}

6.可在组件中，通过import将此引入

任意组件中：

import {music} from ‘封装的axios的文件位置’

例：

mounted(){
    music().then(({data})=>{
      console.log(data)
    })
},

若有疑问，及时提出哦

小作者在持续更新中…