最开始学习的时候,一直不太理解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原型上就可以使用

Logo

前往低代码交流专区

更多推荐