来，我们手写一个简易版的mock.js吧（模拟fetch && Ajax请求）

预期的mock的使用方式

首先我们从使用的角度出发，思考编码过程

• M1. 通过配置文件配置url和response

• M2. 自动检测环境为开发环境时启动Mock.js

• M3. mock代码能直接覆盖global.fetch方法或者XMLHttpRequest构造函数，实现开发无感知

• M4. mock配置不影响实际的请求，可无缝切换为实际请求

M1. 通过配置文件配置url和response

比较符合我们使用习惯的，也许是下面这种mock方式,有一个专门的配置文件，管理请求的url和返回值。每个请求对应输出数组中的一个对象，对象的rule属性可以是一个字符串或者一个正则表达式，用来匹配url,对象的res属性则是我们希望的从中请求中拿到的返回的数据 （也许这里面还应该加个type表示请求的类型，但是我这个是mock的最简化版，所以就不加了）

// api.js
module.exports = [
  {
    rule: '/mock',
    res: {
      a: 'data',
      b: [{c: 1}, {d: 1}],
    },
  },
  {
    rule: '/mock2',
    res: {
      j: {
         k: 'XXX'
      },
    },
  },
];

M2. 自动检测环境为开发环境时启动Mock.js

// __DEV__ 可能是webpack等配置的全局变量
if (__DEV__) {
  require ('./ajaxMock.js');
  require ('./fetchMock.js');
}

M3. mock代码能直接覆盖global.fetch方法或者XMLHttpRequest构造函数，实现开发无感知

// fetchMock.js
window.fetch = function (url) {
    // 覆盖默认fetch
}
// ajaxMock.js
class XMLHttpRequest { 
 // ...覆盖默认XHR
}
window.XMLHttpRequest = XMLHttpRequest;

M4.mock配置不影响实际的请求，可无缝切换为实际请求

mock配置不影响实际的请求，当请求没有命中mock配置文件中的url时，自动切换为实际请求，例如