不要等待！模擬API

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

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

海市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>

創建api/mock/index.js ：

 // api/mock/index.js
從'miragejs'導入{server};

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

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

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

if（process.env.node_env ==='開發'）{
    createserver（）;
}

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

幻影如何工作

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

處理請求

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

 //組件/任務
導出默認{
    異步創建（）{
        嘗試 {
            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數據層的動態數據

對於動態數據，Mirage提供了一個seeds鉤和輕量級數據庫。讓我們重構：

 // 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參數可訪問Mirage數據庫。 request參數包含請求詳細信息。

將幻影集成到現有應用程序中

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

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

您還可以指定自定義urlPrefix ：

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

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

結論

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

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