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