axios-mock-adapter

原文地址：https://www.npmjs.com/package/axios-mock-adapter
Axios adapter，一个更容易的模拟请求

一、安装
1、使用npm：
$ npm install axios-mock-adapter –save-dev
2、使用cdn
https://unpkg.com/axios-mock-adapter/dist/axios-mock-adapter.js
https://unpkg.com/axios-mock-adapter/dist/axios-mock-adapter.min.js
3、也可以使用browser，要求axios在v0.9.0以及以上
二、例子
1、模拟一个GET请求

var axios = require('axios');
var MockAdapter = require('axios-mock-adapter');

// 定义一个mock adapter实例 
var mock = new MockAdapter(axios);

// 模拟GET请求 
// arguments for reply are (status, data, headers) 
mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});

axios.get('/users')
  .then(function(response) {
    console.log(response.data);
  });

2、模拟一个带特定参数的GET请求

var axios = require('axios');
var MockAdapter = require('axios-mock-adapter'); 
var mock = new MockAdapter(axios); 
// arguments for reply are (status, data, headers) 
mock.onGet('/users', { params: { searchText: 'John' } }).reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});

axios.get('/users', { params: { searchText: 'John' } } )
  .then(function(response) {
    console.log(response.data);
  });

3、给相应加一个延迟，单位是毫秒

//这个实例的所有请求都会有一个2s的延迟
var mock = new MockAdapter(axiosInstance, { delayResponse: 2000 });

4、还原原始的adapter（将会移除模拟行为）

mock.restore();

也可以通过reset重置注册过的模拟操作

mock.reset();

reset、restore两者是不同的，restore从axios实例中彻底移除了模拟行为，reset仅仅移除了添加在onGet、onPost所有模拟操作
5、reply函数

mock.onGet('/users').reply(function(config) {
  // `config`是axios的配置项包含的有url
  // return an array in the form of [status, data, headers] 
  return [200, {
    users: [
      { id: 1, name: 'John Smith' }
    ]
  }];
});

6、使用正则

mock.onGet(/\/users\/\d+/).reply(function(config) {
  // the actual id can be grabbed from config.url 
  return [200, {}];
});

7、没有指定的路径匹配

// 状态码500拒绝所有的post请求 
mock.onPost().reply(500);

8、链式操作也是被支持的

mock
  .onGet('/users').reply(200, users)
  .onGet('/posts').reply(200, posts);

9、.replyOnce() 模拟只相应一次

mock
  .onGet('/users').replyOnce(200, users) //第一个请求完成之后，这个操作就会被移除
  .onGet('/users').replyOnce(500); //第二个请求将会出现500错误
  //接下来的任何请求都会返回404错误， 因为没有匹配的操作存在  

10、模拟任何给定url的请求

// mocks GET, POST, ... requests to /foo 
mock.onAny('/foo').reply(200);

11、.onAny可以用在想要测试一个给定顺序的系列请求

// 期望的请求顺序: 
const responses = [
  ['GET',  '/foo', 200, { foo: 'bar' }],
  ['POST', '/bar', 200],
  ['PUT',  '/baz', 200]
];
// 匹配所有请求 
mock.onAny().reply(config => {
  const [method, url, ...response] = responses.shift();
  if (config.url === url && config.method.toUpperCase() === method) return response;
  // Unexpected request, error out 
  return [500, {}];
});

12、reply函数也可以返回一个Promise

mock.onGet('/product').reply(function(config) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      if (Math.random() > 0.1) {
        resolve([200, { id: 4, name: 'foo' } ]);
      } else {
        // reject() reason will be passed as-is. 
        // Use HTTP error status code to simulate server failure. 
        resolve([500, { success: false } ]);
      }
    }, 1000);
  });
});

13、多个请求

var normalAxios = axios.create();
var mockAxios = axios.create();
var mock = MockAdapter(mockAxios);

mock
  .onGet('/orders')
  .reply(() => Promise.all([
      normalAxios
        .get('/api/v1/orders')
        .then(resp => resp.data),
      normalAxios
        .get('/api/v2/orders')
        .then(resp => resp.data),
      { id: '-1', content: 'extra row 1' },
      { id: '-2', content: 'extra row 2' }
    ]).then(
      sources => [200, sources.reduce((agg, source) => agg.concat(source))]
    )
  );