vue中二次封装axios以及api统一管理

1. axios二次封装

在/util/axios.js文件中写入如下代码：

import axios from 'axios';
const service = axios.create({
    // 如果不存在跨域问题并且在.env.xxx文件中有配置的话baseURL的值可以直接使用：process.env.BASE_URL；
    //如果使用proxy做了代理配置，那么baseURL的值直接填写'/'就可以了。
    baseURL: '', 
    timeout: 60000,
    headers: { // 主要进行相关请求头信息配置
        'Content-Type': ‘application/json;charset=UTF-8’，
        'token': 'xxxxxxxxx'
    }
})
// 请求拦截器：所有的请求在发起请求之初都会走这个
service.interceptors.request.use(
    async (config) => {
        ```
           上面的头部信息配置有些固定，毕竟有些接口的相关配置就那么标新立异，鹤立鸡群，那么就可以在这里
           进行动态配置.比如：config.headers.token = 'xxxxxxxx'
        ```
        // 如果需要对数据进行二次处理，同样可以在这里深度定制化处理
        // 最后将动态处理好的config返回就行了。
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
)
// 响应拦截器：所有的请求在响应之后都会走这个
service.interceptors.response.use(
    (response) => {
        // 此时接口已经请求成功，response里面便是请求成功后返回的响应体
        // 一般情况下会在这里进行一次数据的剥离。这样真正发起请求的地方就可以少写一层
        ```
           response里存在data对象，status，statusText，headers对象，config对象，request对象。
           此时我们只需要data和config： const { data, config } = response;
        ```
        ```
           项目里一般会存在文件请求，此时返回的response是二进制文件流,要做个判断：
           const { responseType } = config; if(responseType == 'blob') return response; return data;
        ```
        ```
            有时虽然请求是200，但是实际接口返回的可能不是正常数据，而是自定义的错误code，这时可以在这里进行相关
            前后端协商后的相关配置。比如：code是404，则跳转到404页面。code是502，则跳转到502页面。code
            是401，则跳转到401当然也不一定非要跳转页面，也可以引入Element实例然后弹出错误或者警告信息框。
         ```
        return response;
    },
    (error) => {
        return Promise.reject(error);
    }
)
// 最后将service对象抛出去就行
export default service;

2. api统一管理

在api/index.js中

import request from '@/utils/axios'
export default {
  getInfo(params) {
    return request({
      url: '/xxx/xxx/xxx',
      method: 'post/get',
      params, // 如果是get请求的话
      data: params // 如果是post请求的话
    })
  }
}

在main.js中

import Vue from 'vue'
import App from './App.vue'
import api from '@/api/index';
Vue.prototype.$api = api;
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

在页面中使用

<script>
import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/index';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$api.getInfo(data)
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>