axios请求模拟调试器

axios-mock-adapter介绍

axios-mock-adapter即axios的模拟调试器，通过axios模拟调用后台，后台数据可以使用mock.js来造假数据。

1.安装

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以及以上 

2.引用

2.1 es6  引入方式  import
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
2.2 require  引入方式
var axios = require('axios');
var MockAdapter = require('axios-mock-adapter');

3.使用

首先创建一个实例
let mock = new MockAdapter(axios);

模拟一个get请求：

//导入模块
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
var mock = new MockAdapter(axios);

mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});// 模拟任意GET请求到 /users reply的参数为 (status, data, headers) 
axios.get('/users')
  .then(function(response) {
    console.log(response.data);
  });

模拟一个GET请求带参数的parameters

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

var mock = new MockAdapter(axiosInstance, { delayResponse: 2000 });//在初始化模拟调试器的时候，设置几秒的延迟：响应的延迟 

传递一个function to reply

mock.onGet('/users').reply(function(config) { //config是axios config 
  return [200, {
    users: [
      { id: 1, name: 'John Smith' }
    ]
  }]; //返回一个数组[status, data, headers] 
});

没有具体路径的时候

// 拒绝所有的 POST 请求，返回 HTTP 500 
mock.onPost().reply(500);

模拟任何给定url的请求

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

模拟一个put请求 body/data

mock.onPut('/product', { id: 4, name: 'foo' }).reply(204);

使用正则

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

链式操作也是被支持的

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

.replyOnce() 模拟只相应一次

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

.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, {}];
});

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() 响应将 Promise 对象的状态，从「未完成」变为「失败」可传失败处理函数. 
        // 使用HTTP错误状态码来模拟服务器故障。 
        resolve([500, { success: false } ]);
      }
    }, 1000);
  });
});
//（所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。）

多个请求

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

4.配置

超时设置

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

移除模拟或重置行为

mock.restore();   还原原始的adapter（将会移除模拟行为）
mock.reset();   //重置注册过的模拟操作

reset、restore两者是不同的，restore从axios实例中彻底移除了模拟行为，reset仅仅移除了添加在onGet、onPost所有模拟操作
资料收集：
插件地址
简介
说明