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

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

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

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

我們將使用VUE構建一個簡單的待辦事項應用程序（儘管該方法是獨立於框架的）。

建立海市rage

安裝Mirage：

 ＃npm
npm i miragejs -d

＃紗
紗線添加miragejs -d

最佳文件夾結構：

 <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'導入{server};

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

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

 // main.js
從'./api/mock/index'導入CreateServer;

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

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

幻影如何工作

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

處理請求

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

 //組件/任務
導出默認{
    異步創(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'，（）=>（{{
        任務：[[
            {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ù)庫。讓我們重構：

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

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

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

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

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

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

您還可以指定自定義urlPrefix ：

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

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

結論

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

以上是不要等待！模擬API的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！