iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

前端我又來了 - 30天 Vue學好學滿系列 第 27

[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

感謝各路大神 /images/emoticon/emoticon31.gif


上一篇
[30天 Vue學好學滿 DAY26] axios & axios-mock-adapter
下一篇
[30天 Vue學好學滿 DAY28] keep-alive 狀態保留
系列文
前端我又來了 - 30天 Vue學好學滿30

尚未有邦友留言

立即登入留言