axios解决多个baseURL配置的几种方式

在开发初期，我们往往都会对axios进行初始化配置，把常用的 baseURL 通过环境变量或直接写死的方式配置好，这样就可以在接口请求的时候少写公共的url前缀，以达到减少代码量，提高可读性的目的。

封装示例：

import qs from 'qs'

const instance = axios.create({
  baseURL: '/api',
  transformRequest: [(data, headers) => {
    if(headers && headers['Content-Type'] === 'application/json'){
      return JSON.stringify(data)
    }
    return qs.stringify(data)
  }]
})

export default instance

但项目进行到中后期，又有了新的接口地址变化，需要新的代理接口，如果直接修改axios的 baseURL 就会造成以前的接口出问题，这是肯定不行的，但不管怎样问题还是要解决的，下面提供三个解决方式：

1、添加新的axio的实例封装

示例：

import qs from 'qs'

const instance = axios.create({
  baseURL: '/tapi',
  transformRequest: [(data, headers) => {
    if(headers && headers['Content-Type'] === 'application/json'){
      return JSON.stringify(data)
    }
    return qs.stringify(data)
  }]
})

export default instance

使用示例：

import axios from '@/plugins/taxios'

缺点：会多维护一份axios配置实例，增加文件数量

2、使用原生的axios处理

import axios from 'axios'

缺点：在某些请求的时候，特别是post请求，需要多写代码进行参数转换，不然后端接收不到请求参数

3、请求参数添加baseURL参数

这种方式比较推荐，因为代码量不多，而且还可以接着使用以前的封装

示例：

import axios from '@/plugins/axios'

// get
axios.get('/user/list', {params: {page: 1}, baseURL: '/tapi'}).then((res: any) => {
  console.log(res)
})

// post
axios.post('/user/set', {name: 'tom'}, {baseURL: '/tapi'}).then((res: any) => {
  console.log(res)
})

最新内容请查看原文链接：fenxianglu.cn/article/500