6-3、扩展axios.create静态接口

需求

目前为止，我们的axios都是一个单例，一旦我们修改了axios的默认配置，会影响所有的请求。我们希望提供一个axios.create的静态接口，允许我们创建一个新的axios实例，同时允许我们传入新的配置和默认配置合并，并作为新的默认配置。
举个例子：

const instance = axios.create({
  transformRequest: [(function(data) {
    return qs.stringify(data)
  }), ...(axios.defaults.transformRequest as AxiosTransformer[])],
  transformResponse: [...(axios.defaults.transformResponse as AxiosTransformer[]), function(data) {
    if (typeof data === 'object') {
      data.b = 2
    }
    return data
  }]
})

instance({
  url: '/config/post',
  method: 'post',
  data: {
    a: 1
  }
})

静态方法扩展

由于axios扩展了一个静态接口，所以我们先来修改接口类型的定义
types/index.ts

interface AxiosStatic extends AxiosInstance {
  create(config?: AxiosRequestConfig): AxiosInstance
}

create函数可以接受一个AxiosRequestConfig类型的配置，作为默认配置的扩展，也可以不传参。

接着我们来实现axios.create静态方法
axios.ts

import { AxiosInstance, AxiosRequestConfig, AxiosStatic } from "./types";
import Axios from './core/Axios'
import { extend } from "./helpers/util";
import defaults from './core/defaults'
import mergeConfig from "./core/mergeConfig";

function createInstance(config: AxiosRequestConfig): AxiosStatic {
  const context = new Axios(config)
  const instance = Axios.prototype.request.bind(context)
  extend(instance, context)
  return instance as AxiosStatic
}
const axios = createInstance(defaults)
axios.create = function create(config) {
  return createInstance(mergeConfig(defaults, config))
}
export default axios

demo

import axios from '../../src/index'
import qs from 'qs'
axios({
  transformRequest: [(function(data) {
    return qs.stringify(data)
  }), ...(axios.defaults.transformRequest as AxiosTransformer[])],
  transformResponse: [...(axios.defaults.transformResponse as AxiosTransformer[]), function(data) {
    if (typeof data === 'object') {
      data.b = 2
    }
    return data
  }],
  url: '/api/extend/post',
  method: 'post',
  data: {
    a: 1
  }
}).then((res) => {
  console.log(res.data)
})

const instance = axios.create({
  transformRequest: [(function(data) {
    return qs.stringify(data)
  }), ...(axios.defaults.transformRequest as AxiosTransformer[])],
  transformResponse: [...(axios.defaults.transformResponse as AxiosTransformer[]), function(data) {
    if (typeof data === 'object') {
      data.b = 2
    }
    return data
  }]
})
instance.defaults.headers.common['test2'] = 'test2'

instance({
  url: '/api/extend/post',
  method: 'post',
  data: {
    a: 8
  }
}).then((res) => {
  console.log(res.data)
})

这样，我们就实现了axios.create静态接口的扩展，整个ts-axios的配置化也告一段落。官方axios还支持取消请求的能力，在发送请求前及发送请求出去未响应之前都可以取消请求。接下来我们来实现取消请求的功能。