8-7、静态方法扩展

需求

官方axios库实现了axios.all、axios.spread等方法，它们的用法如下：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

实际上，axios.all就是Promise.all的封装，它返回的是一个Promise数组，then函数的参数本应是一个参数为Promise resolves（数组）的函数，在这里使用axios.spread方法，所以axios.spread方法是接收一个函数，返回一个新的函数，新函数的结构满足then函数的参数结构。

这个需求直接使用Promise.all也可以实现

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(([acct,perms]) {
    // Both requests are now complete
  }));

在Promise.all的resolve函数中，我们可以直接通过数组的解构拿到每个请求对应的响应对象。

但是为了与官网保持一致，我们还是在ts-axios中实现这2个方法。

官方axios库也通过axios.Axios对外暴露一个Axios类（感觉也没有什么使用场景，但为了保持一致，我们也还是会实现）。

另外对于axios实例，官网还提供了getUri方法在不发送请求的前提下根据传入的配置返回一个url， 如：

const fakeConfig = {
  baseURL: 'https://www.baidu.com/',
  url: '/user/12345',
  params: {
    idClient: 1,
    idTest: 2,
    testString: 'thisIsATest'
  }
}
console.log(axios.getUri(fakeConfig))
// https://www.baidu.com/user/12345?idClient=1&idTest=2&testString=thisIsATest

代码实现

首先修改类型定义：

interface AxiosStatic extends AxiosInstance {
 // ...
  all(promises: Array>): Promise
  spread(callback: (...args: T[]) => R): (arr: T[]) => R
  Axios: AxiosClassStatic
}

interface AxiosClassStatic {
  new (config: AxiosRequestConfig): Axios
}
interface Axios {
  // ...
  getUri(config?: AxiosRequestConfig): string
}

实现静态方法：

export default class Axios {
 // ...
  getUri(config?: AxiosRequestConfig): string {
    config = mergeConfig(this.defaults, config)
    return transformUrl(config)
  }
}

demo

function getA() {
  return axios.get('/api/extend/get')
}

function getB() {
  return axios.get('/api/extend/get')
}

axios.all([getA(), getB()])
  .then(axios.spread(function(resA, resB) {
    console.log(resA.data)
    console.log(resB.data)
  }))


axios.all([getA(), getB()])
  .then(([resA, resB]) => {
    console.log(resA.data)
    console.log(resB.data)
  })

const fakeConfig = {
  baseURL: 'https://www.baidu.com/',
  url: '/user/12345',
  params: {
    idClient: 1,
    idTest: 2,
    testString: 'thisIsATest'
  }
}
console.log(axios.getUri(fakeConfig))