需求分析

有些时候，需要请求某个域名下的多个接口，不想每次都在发送请求的时候都填写完整的 URL，所以可以配置一个 baseURL 之后可以穿相对的路径。

🌰 使用例子：

const instance = axios.create({
  baseURL: 'https://some-domain.com/api'
})

instance.get('/get')

instance.post('/post')

一旦配置了 baseURL ，之后传入的请求 URL 都会与 baseURL 拼接成完成的绝对地址，除非传入的 URL 是绝对地址。

所以要检验请求 URL 是否为绝对地址。

代码实现

修改 AxiosRequestConfig 的类型定义：

export interface AxiosRequestConfig {
  // ...
  baseURL?: string
}

在 src/helpers/url.ts 中实现两个辅助函数：

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

export function combineURL(baseURL: string, relativeURL?: string): string {
  return relativeURL ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '') : baseURL
}

在 core/dispatchRequest.ts 中调用：

function transformURL(config: AxiosRequestConfig): any {
  let { url, params, paramsSerializer, baseURL } = config
  if(baseURL && !isAbsoluteURL(url!)) {
    url = combineURL(baseURL, url)
  }
  return buildURL(url!, params, paramsSerializer)
}

编写测试 DEMO

examples/more/app.ts ：

const instance = axios.create({
  baseURL: 'https://cdn.jsdelivr.net/gh/simon1uo/image-flow@master/image/'
})

instance.get('D4kLn9.png')

instance.get('https://cdn.jsdelivr.net/gh/simon1uo/image-flow@master/image/EGVR9A.png')