baseURL

有些时候，我们会请求某个域名下的多个接口，我们不希望每次发送请求都填写完整的 url，希望可以配置一个 baseURL，之后都可以传相对路径。如下：

//  baseURL
const instace = axios.create({
  baseURL: 'https://dog.ceo/api/breeds/image'
})
// 会自动拼上根路径
instace.get('random', {
}).then(res => {
  console.log(res)
}).catch(err => {
  console.error(err)
})
// 不会自动拼上根路径
instace.get('https://dog.ceo/api/breeds/image/random', {
}).then(res => {
  console.log(res)
}).catch(err => {
  console.error(err)
})

我们一旦配置了 baseURL，之后请求传入的 url 都会和我们的 baseURL 拼接成完整的绝对地址，除非请求传入的 url 已经是绝对地址。

代码实现

修改transformUrl逻辑

// 转换url
function transformUrl(config: AxiosRequestConfig) {
  let { url, params, paramsSerializer, baseURL } = config

  if (baseURL && !isAbsoluteURL(url!)) {
    url = combineURL(baseURL, url)
  }
  return buildRUL(url || '', params, paramsSerializer)
}

新增工具函数

export function isAbsoluteURL(url: string): boolean {
  return /([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
}

export function combineURL(baseURL: string, relativeUrl?: string): string {
  if (!relativeUrl) {
    return baseURL
  }

  if (isAbsoluteURL(baseURL)) {
    return `${baseURL.replace(/\/+/, '')}/${relativeUrl.replace(/^\/+/i, '')}`
  }

  return baseURL
}