领域驱动设计DDD(Domain Driven Design)的主旨思想就是不再把需求分析和代码实现分解为两个独立的过程，代码即方案，这对于代码的设计提出了更高的要求。要求即使是非开发人员也能非常容易的了解到他想要了解到的东西。 这就要求我们的代码必须是分层设计的，层次逐层递进, 这就需要我们有更好的分层方案， 参考koa, express采用的洋葱模型就是一种不错的模式。

首先我们定义一个中间件管理器 用户管理中间件的添加、删除

// middleWareManage.js
// 中间件管理器， 用于添加 删除中间件
export default class MiddleWareManager {
  constructor(job) {
    this.job = job
    this.number = 0
    this.middleWares = []
  }
  use(middleWare) {
    this.middleWares.push(middleWare)
    return this
  }
  remove(middleWare) {
    const index = this.middleWares.indexOf(middleWare)
    this.middleWares.splice(index, 1)
    return this
  }
  run (config) {
    const { length } = this.middleWares
    function innerRun(config, index) {
      if (index >= length) {
        return this.job(config)
      }
      return this.middleWares[index](config, config => innerRun.call(this, config, index + 1))
    }
    return innerRun.call(this, config, 0)
  }
}

基于中间件管理器实现我们axios 实例的实现

// http.js
import axios from 'axios'
import { MiddleWareManager } from './middleWareManage'
// 为请求添加全局的loading 中间件
function loadingMiddleWare(options)) {
  let num = 0
  return async function middleWare1(config, next) {
    const { showLoading, ...rest } = config
    if (showLoading && num === 0) {
      num += 1
      console.log('TODO: show loading')
    }
    const response = await next(rest)
    if (showLoading && num === 1) {
      num -= 1
      console.log('TODO: hide loading')
    }
    return response
  }
}

const manager = new MiddleWareManager(axios)
manager.use(loadingMiddleWare())
export default {
  get(url, params, options) {
    return manager.run({
      url,
      params,
      ...options
    })
  },
  post(url, data, options) {
    return manager.run({
      url,
      data,
      ...options
    })
  }
}

基于业务或后端微服务 实现我们不同的接口调用实现

// user.js
import { get, post } from './http'
export const getUser = (id) => get('/user/' + id)
export const loginuser = (username, password) => post('/user/login', {
  username,
  password
})