現(xiàn)代的Web應(yīng)用程序開發(fā)通常涉及在前端和后端之間的松散耦合，經(jīng)常由單獨的團隊處理。這可能導(dǎo)致同步挑戰(zhàn)。一種解決方案是模擬后端API，創(chuàng)建一個模仿預(yù)期行為的“假”服務(wù)器。這個過程被稱為嘲笑。理想情況下，嘲笑可以使前端發(fā)展獨立進行，而無需直接的后端依賴。盡管存在多種模擬方法，但這可能令人生畏。

本文展示了使用框架 - 不合Snostic方法（適用于任何框架或香草JavaScript）的有效API模擬及其在新應(yīng)用或現(xiàn)有應(yīng)用程序中的實現(xiàn)。

海市rage：客戶端模擬解決方案

我們將利用Miragejs，一個客戶端模擬框架。 Mirage在瀏覽器中運行，攔截XMLHttpRequest并Fetch請求以模擬API響應(yīng)。它提供了一個用戶友好的界面，并簡化了模擬過程。

我們將使用VUE構(gòu)建一個簡單的待辦事項應(yīng)用程序（盡管該方法是獨立于框架的）。

建立海市rage

安裝Mirage：

 ＃npm
npm i miragejs -d

＃紗
紗線添加miragejs -d

最佳文件夾結(jié)構(gòu)：

 <code>/ ├── public ├── src │ ├── api │ │ └── mock │ │ ├── fixtures │ │ │ └── get-tasks.js │ │ └── index.js │ └── main.js ├── package.json └── package-lock.json</code>

創(chuàng)建api/mock/index.js ：

 // api/mock/index.js
從'miragejs'導(dǎo)入{server};

導(dǎo)出默認(rèn)函數(shù)（{Environment ='development'} = {}）{
    返回新服務(wù)器（{
        環(huán)境，
        路由（）{
            //此處定義的路線
        }，，
    }）;
}

在您應(yīng)用程序的Bootstrap文件中（例如， src/main.js for Vue）：

 // main.js
從'./api/mock/index'導(dǎo)入CreateServer;

if（process.env.node_env ==='開發(fā)'）{
    createserver（）;
}

此條件可確保超越海市rage樓，從生產(chǎn)制造中排除。

幻影如何工作

Mirage使用偽造者庫是客戶端。偽裝者攔截請求，阻止它們到達實際服務(wù)器并將其路由到模擬的Mirage服務(wù)器。 DevTools的網(wǎng)絡(luò)選項卡不會在內(nèi)部處理時顯示Mirage請求。

處理請求

讓我們創(chuàng)建A /api/tasks端點以獲取待辦事項項目（使用Axios）：

 //組件/任務(wù)
導(dǎo)出默認(rèn){
    異步創(chuàng)建（）{
        嘗試 {
            const {data} =等待axios.get（'/api/tasks'）;
            this.tasks = data.tasks;
        }捕獲（e）{
            控制臺（E）;
        }
    }
};

最初，Mirage將記錄指示未定義路由的錯誤。我們通過在api/mock/index.js中添加路由處理程序來解決此問題：

 // api/mock/index.js
路由（）{
    this.get（'/api/tasks'，（）=>（{{
        任務(wù)：[[
            {id：1，文字：“喂貓”}，
            {id：2，文字：“洗碗”}，
        ]，，
    }））;
}，，

Mirage支持各種HTTP方法（ get ， post ，PAST， patch ， put ， delete ， options ）。

帶有Mirage數(shù)據(jù)層的動態(tài)數(shù)據(jù)

對于動態(tài)數(shù)據(jù)，Mirage提供了一個seeds鉤和輕量級數(shù)據(jù)庫。讓我們重構(gòu)：

 // api/mock/index.js
種子（服務(wù)器）{
    server.db.loaddata（{
        任務(wù)：[[
            {id：1，文字：“喂貓”}，
            {id：2，文字：“洗碗”}，
        ]，，
    }）;
}，，

路由（）{
    this.get（'/api/tasks'，（schema）=> {
        返回schema.db.tasks;
    }）;
    this.post（'/api/tasks'，（架構(gòu)，請求）=> {
        const task = json.parse（request.requestbody）.data;
        返回schema.db.tasks.insert（task）;
    }）;
    this.delete（'/api/tasks/：id'，（架構(gòu)，請求）=> {
        const ID = request.params.id;
        返回schema.db.tasks.remove（id）;
    }）;
}

路由處理程序中的schema參數(shù)可訪問Mirage數(shù)據(jù)庫。 request參數(shù)包含請求詳細(xì)信息。

將幻影集成到現(xiàn)有應(yīng)用程序中

要將Mirage集成到現(xiàn)有應(yīng)用程序中，請使用passthrough()方法處理未經(jīng)手的請求：

路由（）{
    this.get（'/api/tasks'，（）=> {...}）;
    this.passTrough（）; //處理未經(jīng)處理的請求
}

您還可以指定自定義urlPrefix ：

路由（）{
    this.urlprefix ='https：//devenv.ourapp.example';
    this.get（'/tasks'，（）=> {...}）;
}

這允許Mirage和真實API之間的無縫過渡。

結(jié)論

Miragejs提供了一種簡化的客戶端解決方案，用于API模擬，從而消除了對外部流程或服務(wù)器端知識的需求。它的易用性和功能強大的功能使其成為前端開發(fā)人員的寶貴工具。有關(guān)更多高級功能和教程，請參閱官方MirageJS文檔?？梢栽贕itHub上找到一個工作示例。

以上是不要等待！模擬API的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！