baseURL

释放双眼,带上耳机,听听看~!
web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。

baseURL

需求分析

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

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

instance.get('/get')

instance.post('/post')
1
2
3
4
5
6
7

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

代码实现

首先修改一下类型定义。

types/index.ts

export interface AxiosRequestConfig {
  // ...
  baseURL?: string
}
1
2
3
4

接下来实现 2 个辅助函数。

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
}
1
2
3
4
5
6
7

最后我们来调用这俩个辅助函数。

core/dispatchRequest.ts

function transformURL(config: AxiosRequestConfig): string {
  let { url, params, paramsSerializer, baseURL } = config
  if (baseURL && !isAbsoluteURL(url!)) {
    url = combineURL(baseURL, url)
  }
  return buildURL(url!, params, paramsSerializer)
}
1
2
3
4
5
6
7

demo 编写

const instance = axios.create({
  baseURL: 'https://img.mukewang.com/'
})

instance.get('5cc01a7b0001a33718720632.jpg')

instance.get('https://img.mukewang.com/szimg/5becd5ad0001b89306000338-360-202.jpg')
1
2
3
4
5
6
7

这个 demo 非常简单,我们请求了慕课网的 2 张图片,注意当第二个请求 url 已经是绝对地址的时候,我们并不会再去拼接 baseURL

至此,ts-axios 就实现了 baseURL 的配置功能,接下来我们来实现 ts-axios 的静态方法扩展。

人已赞赏
杂七杂八

自定义合法状态码

2020-12-18 13:31:59

杂七杂八

静态方法扩展

2020-12-18 13:43:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索