axios.create的理解以及在VUE项目中为何要对axios进行封装

最开始学习的时候，一直不太理解axios中create的用法，今天来大概聊聊

进入公司后，发现公司并不是用的axios去获取接口，而是对axios进行了一次封装，因为我们的项目比较庞大，接口并没有部署在同一台服务器上，在config将服务器地址代理到两个域名上

    proxyTable: {
      '/wsq': {
        // target: 'http://127.0.0.1:8080', // 设置你调用的接口域名和端口号
        changeOrigin: true, // 跨域
        pathRewrite: {
          '^/wsq': ''
        },
      },
      '/lcf': {
        target: 'http://127.9.9.12:8081', 
        changeOrigin: true, // 跨域
        pathRewrite: {
          '^/lcf': ''
        },
      }
    },

这样我们的获取接口的时候如果是/wsq/kjadkfj/adfklkjh  类似于这种接口，就会代理到127.0.0.1这个地址上，如果是 /lcf/ajfhajkd/sdf   类似于 这种接口，请求的时候就会代理到127.9.9.12这个服务器地址上，如果用原生的axios去获取请求，那么基本的配置如baseUrl,请求头等（除公共部分外），如果两个接口有各自不同的，就需要使用两个axios

所以可以做以下封装

function apiAxios (method, url, params, headers) {
    var obj = {
      baseURL: process.env.BASE_API,//基本地址
      method: method,//请求的方法
      url: url,//接口地址
      params: method === 'GET' || method === 'DELETE' ? params : null,//get请求和delete请求参数在url地址后面，不在请求体当中
      data: method === 'POST' || method === 'PUT' ? params : null,//put请求，post请求参数在请求体当中
      headers:headers?Object.assign({}, axios.defaults.headers,headers):axios.default.headers,//判断接口有没有定制的请求头，与基本的请求头进行合并
    }
    return new Promise((resolve, reject) => {
      axios(httpDefault)
        .then((res) => {
          resolve(res)
        }).catch((response) => {
          reject(response)
          // this.$message.error('请求失败！')
        })
    })
}

在main.js导出上述封装，挂载vue原型上就可以使用