axios.create的理解以及在VUE项目中为何要对axios进行封装
最开始学习的时候,一直不太理解axios中create的用法,今天来大概聊聊进入公司后,发现公司并不是用的axios去获取接口,而是对axios进行了一次封装,因为我们的项目比较庞大,接口并没有部署在同一台服务器上,在config将服务器地址代理到两个域名上proxyTable: {'/wsq': {// target: 'http://127.0.0.1:8080', // 设置你调用的接口域名
·
最开始学习的时候,一直不太理解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原型上就可以使用
更多推荐
已为社区贡献7条内容
所有评论(0)