[30天 Vue学好学满 DAY27] axios-mock-adapter-2

带参数

mock

mock_adapter.onGet("/todo-list", { params: { id: "1" } }).reply(200, {
  todoList: [{ id: "1", name: "代办事项A", done: false }],
});

API

this.$axios.get("/todo-list", { params: { id: "1" } }).then((res) => {
  this.todoList = res.data.todoList;
});

params错误测试: 404

延迟(毫秒)

延迟虚设至於new MockAdapter中，需另外写。

// 延迟5秒
let mock_adapter = new MockAdapter(axios, { delayResponse: 5000 });

错误模拟

第一次错误通常用来测试重试功能是否如预期。

// 网络错误
mock.onGet('/todo-list').networkError();
// 网络错误(实行一次)
mock.onGet('/todo-list').networkErrorOnce();

// 网络超时
mock.onGet("/users").timeout();
// 网络超时(实行一次)
mock.onGet("/users").timeoutOnce();

模拟一次

透过replyOnce函数实践

mock_adapter.onGet("/todo-list", { params: { id: "1" } }).replyOnce(200, {
  todoList: [{ id: "1", name: "代办事项A", done: false }],
});

动词指定(不进行URL匹配)

mock_adapter.onPost().reply(412);
mock_adapter.onGet().reply(500);

指定URL(不指定动词)

mock_adapter.onAny("/anyURL").reply(500);

整体来说，mock的好处有以下两点:
对业务逻辑程序无侵入，可另外撰写做使用，使用後也不必删除，可透过设定档进行切换模式，决定是否启用。
可针对不同情境进行模拟，例如回传值、Http延迟、错误行为....

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://www.twblogs.net/a/5d49c12abd9eee5327fbd580
https://www.itread01.com/content/1541838193.html

感谢各路大神