平時(shí)在開發(fā)的時(shí)候，由于后端的接口暫時(shí)還沒開發(fā)完成，所以我們前端需要自己去 mock 數(shù)據(jù)。

最近發(fā)現(xiàn)了 axios 的一個(gè) mock 工具，叫 axios-mock-adapter，這是一個(gè) axios 的 mock 適配器，能讓你在使用 axios 的時(shí)候，為你生成一些 mock 數(shù)據(jù)，使用起來也很簡單。

首先我們需要安裝這個(gè)插件：

npm install axios-mock-adapter --save-dev

如果你想直接引入的話，可以用這個(gè)兩個(gè)地址：

• https://unpkg.com/axios-mock-adapter/dist/axios-mock-adapter.js
• https://unpkg.com/axios-mock-adapter/dist/axios-mock-adapter.min.js

這個(gè)插件可以運(yùn)行在 nodejs 環(huán)境，也可以運(yùn)行在瀏覽器端。

模擬一個(gè) GET 請(qǐng)求

加入我們想 mock 一個(gè) GET /user，請(qǐng)求，我們可以使用 axios-mock-adapter 的 reply 方法

這樣我們使用默認(rèn) axios 實(shí)例去請(qǐng)求 GET /user 的時(shí)候就可以拿到 mock 數(shù)據(jù)：

模擬 GET 帶特定參數(shù)的請(qǐng)求

當(dāng)然你也可以根據(jù)特定傳入?yún)?shù)，去返回相應(yīng)的 mock 數(shù)據(jù)：

這樣我們傳入特定參數(shù)的時(shí)候，才會(huì)返回特定的 mock 數(shù)據(jù)：

模擬請(qǐng)求延遲

如果你想模擬請(qǐng)求延遲的話，可以在在生成適配器實(shí)例的時(shí)候傳入 delayResponse：

模擬網(wǎng)絡(luò)錯(cuò)誤

我們可以用它來模擬請(qǐng)求網(wǎng)絡(luò)錯(cuò)誤：

模擬網(wǎng)絡(luò)超時(shí)

我們也可以使用它來模擬請(qǐng)求網(wǎng)絡(luò)超時(shí)：

傳入一個(gè)函數(shù)

我們可以給 reply 傳入一個(gè)函數(shù)，這樣也能靈活根據(jù)配置去決定返回什么 mock 數(shù)據(jù)：

模擬重定向

也可以使用他來進(jìn)行模擬重定向，返回一個(gè)新的請(qǐng)求，就相當(dāng)于重定向：

正則匹配 url

可以使用正則表達(dá)式對(duì)于 url 進(jìn)行匹配：

小結(jié)

更多高級(jí)的用法可以去到使用文檔中查看：https://www.npmjs.com/package/axios-mock-adapter