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))]    )  );