拦截器是 ts-axios 库一个非常实用的功能，接下来我们来编写它的测试代码。

测试代码编写

test/interceptor.spec.ts：

  1. import axios, { AxiosRequestConfig, AxiosResponse } from '../src/index'
  2. import { getAjaxRequest } from './helper'
  4. describe('interceptors', () => {
  5.   beforeEach(() => {
  6.     jasmine.Ajax.install()
  7.   })
  9.   afterEach(() => {
  10.     jasmine.Ajax.uninstall()
  11.   })
  13.   test('should add a request interceptor', () => {
  14.     const instance = axios.create()
  16.     instance.interceptors.request.use((config: AxiosRequestConfig) => {
  17.       config.headers.test = 'added by interceptor'
  18.       return config
  19.     })
  21.     instance('/foo')
  23.     return getAjaxRequest().then(request => {
  24.       expect(request.requestHeaders.test).toBe('added by interceptor')
  25.     })
  26.   })
  28.   test('should add a request interceptor that returns a new config object', () => {
  29.     const instance = axios.create()
  31.     instance.interceptors.request.use(() => {
  32.       return {
  33.         url: '/bar',
  34.         method: 'post'
  35.       }
  36.     })
  38.     instance('/foo')
  40.     return getAjaxRequest().then(request => {
  41.       expect(request.method).toBe('POST')
  42.       expect(request.url).toBe('/bar')
  43.     })
  44.   })
  46.   test('should add a request interceptor that returns a promise', done => {
  47.     const instance = axios.create()
  49.     instance.interceptors.request.use((config: AxiosRequestConfig) => {
  50.       return new Promise(resolve => {
  51.         setTimeout(() => {
  52.           config.headers.async = 'promise'
  53.           resolve(config)
  54.         }, 10)
  55.       })
  56.     })
  58.     instance('/foo')
  60.     setTimeout(() => {
  61.       getAjaxRequest().then(request => {
  62.         expect(request.requestHeaders.async).toBe('promise')
  63.         done()
  64.       })
  65.     }, 100)
  66.   })
  68.   test('should add multiple request interceptors', () => {
  69.     const instance = axios.create()
  71.     instance.interceptors.request.use(config => {
  72.       config.headers.test1 = '1'
  73.       return config
  74.     })
  75.     instance.interceptors.request.use(config => {
  76.       config.headers.test2 = '2'
  77.       return config
  78.     })
  79.     instance.interceptors.request.use(config => {
  80.       config.headers.test3 = '3'
  81.       return config
  82.     })
  84.     instance('/foo')
  86.     return getAjaxRequest().then(request => {
  87.       expect(request.requestHeaders.test1).toBe('1')
  88.       expect(request.requestHeaders.test2).toBe('2')
  89.       expect(request.requestHeaders.test3).toBe('3')
  90.     })
  91.   })
  93.   test('should add a response interceptor', done => {
  94.     let response: AxiosResponse
  95.     const instance = axios.create()
  97.     instance.interceptors.response.use(data => {
  98.       data.data = data.data + ' - modified by interceptor'
  99.       return data
  100.     })
  102.     instance('/foo').then(data => {
  103.       response = data
  104.     })
  106.     getAjaxRequest().then(request => {
  107.       request.respondWith({
  108.         status: 200,
  109.         responseText: 'OK'
  110.       })
  112.       setTimeout(() => {
  113.         expect(response.data).toBe('OK - modified by interceptor')
  114.         done()
  115.       }, 100)
  116.     })
  117.   })
  119.   test('should add a response interceptor that returns a new data object', done => {
  120.     let response: AxiosResponse
  121.     const instance = axios.create()
  123.     instance.interceptors.response.use(() => {
  124.       return {
  125.         data: 'stuff',
  126.         headers: null,
  127.         status: 500,
  128.         statusText: 'ERR',
  129.         request: null,
  130.         config: {}
  131.       }
  132.     })
  134.     instance('/foo').then(res => {
  135.       response = res
  136.     })
  138.     getAjaxRequest().then(request => {
  139.       request.respondWith({
  140.         status: 200,
  141.         responseText: 'OK'
  142.       })
  144.       setTimeout(() => {
  145.         expect(response.data).toBe('stuff')
  146.         expect(response.headers).toBeNull()
  147.         expect(response.status).toBe(500)
  148.         expect(response.statusText).toBe('ERR')
  149.         expect(response.request).toBeNull()
  150.         expect(response.config).toEqual({})
  151.         done()
  152.       }, 100)
  153.     })
  154.   })
  156.   test('should add a response interceptor that returns a promise', done => {
  157.     let response: AxiosResponse
  158.     const instance = axios.create()
  160.     instance.interceptors.response.use(data => {
  161.       return new Promise(resolve => {
  162.         // do something async
  163.         setTimeout(() => {
  164.           data.data = 'you have been promised!'
  165.           resolve(data)
  166.         }, 10)
  167.       })
  168.     })
  170.     instance('/foo').then(res => {
  171.       response = res
  172.     })
  174.     getAjaxRequest().then(request => {
  175.       request.respondWith({
  176.         status: 200,
  177.         responseText: 'OK'
  178.       })
  180.       setTimeout(() => {
  181.         expect(response.data).toBe('you have been promised!')
  182.         done()
  183.       }, 100)
  184.     })
  185.   })
  187.   test('should add multiple response interceptors', done => {
  188.     let response: AxiosResponse
  189.     const instance = axios.create()
  191.     instance.interceptors.response.use(data => {
  192.       data.data = data.data + '1'
  193.       return data
  194.     })
  195.     instance.interceptors.response.use(data => {
  196.       data.data = data.data + '2'
  197.       return data
  198.     })
  199.     instance.interceptors.response.use(data => {
  200.       data.data = data.data + '3'
  201.       return data
  202.     })
  204.     instance('/foo').then(data => {
  205.       response = data
  206.     })
  208.     getAjaxRequest().then(request => {
  209.       request.respondWith({
  210.         status: 200,
  211.         responseText: 'OK'
  212.       })
  214.       setTimeout(() => {
  215.         expect(response.data).toBe('OK123')
  216.         done()
  217.       }, 100)
  218.     })
  219.   })
  221.   test('should allow removing interceptors', done => {
  222.     let response: AxiosResponse
  223.     let intercept
  224.     const instance = axios.create()
  226.     instance.interceptors.response.use(data => {
  227.       data.data = data.data + '1'
  228.       return data
  229.     })
  230.     intercept = instance.interceptors.response.use(data => {
  231.       data.data = data.data + '2'
  232.       return data
  233.     })
  234.     instance.interceptors.response.use(data => {
  235.       data.data = data.data + '3'
  236.       return data
  237.     })
  239.     instance.interceptors.response.eject(intercept)
  240.     instance.interceptors.response.eject(5)
  242.     instance('/foo').then(data => {
  243.       response = data
  244.     })
  246.     getAjaxRequest().then(request => {
  247.       request.respondWith({
  248.         status: 200,
  249.         responseText: 'OK'
  250.       })
  252.       setTimeout(() => {
  253.         expect(response.data).toBe('OK13')
  254.         done()
  255.       }, 100)
  256.     })
  257.   })
  258. })

运行测试后我们发现在测试用例 should add a request interceptor that returns a new config object 报错了，是代码运行的报错，而不是测试期望结果的报错，顺着报错信息，我们可以找到报错原因。
在 core/xhr.ts 中，执行到 processHeaders 中的 Object.keys(headers).forEach 代码报错，因为我们在拦截器对请求配置做了修改，导致 headers 为空，所以报错。
于是我们在解构赋值 headers 的时候，给它添加默认值即可。

  1. const {
  2.   // ...
  3.   headers = {}
  4. } = config

再次运行测试，发现全部测试通过。
至此，我们完成了 ts-axios 库对拦截器模块的单元测试，下节课我们来测试 mergeConfig 模块的业务逻辑。