我們新建一個test-demo項目后

我們新建一個商品列表的接口，接口路由暫定/api/shoplist

我們注意到我們可以添加接口入參pageNum與pageSize,并且我們mock了返回的字段

調試接口

我們可以在調試中檢測自己的mock返回接口

注意我們在調試中，我們可以根據不同類型接口添加請求頭、Header、Query、body具體因接口類型而定

頁面測試

我們在apipost中在線調試了這個接口，我們在一個頁面中測試一下我們這個接口是否真實有用

 <div id="app"></div>

<script>

    const appDom = document.getElementById('app');

    const baseUrl = 'https://console-mock.apipost.cn/mock/cd19ff79-1221-4f2b-8671-ac0c6e19e6b7'

    const getData = async () => {

        const res = await fetch(${baseUrl}/api/shoplist?pageNum=1&pageSize=10)
       const {status} = res;
       if (status === 200) {
        return res.json();
       }
    }
  getData().then(({data}) => {
      const html = data.map(item => {
          return `
          <div class="item">
              <p>${item.name}</p>
              <p>${item.age}</p>
          </div>`
   });
   appDom.innerHTML = html.join('');
})

我們看到頁面上請求

你就會發現你mock的接口數據在頁面就能正常的調用了

MOCK接口文檔

當我們成功的用APIPOST模擬出與后臺一樣的類似接口時，一般后端都會給出接口文檔，那么現在你可以像后端一樣，按照后端要求，你可以在MOCK中完善你的MOCK接口文檔

在APIPOST中提供了一份非常強大的自定生成接口文檔功能

編輯以下，然后點擊保存

我們點擊分享

當我們復制打開這個鏈接時api/shoplist[3]

此時你會發現自動生成的文檔結構非常的清晰，因此在項目中，你可以完全不依賴后端接口，并且可以引導后端接口的設計了，因此你也大可不必等待真實接口，而你也一樣可以在真實接口聯調的前期進行快速開發。

總結

參考資料

[1]EazyMock： https://mock.mengxuegu.com/

[2]apipost： https://v7.apipost.cn/

[3]api/shoplist： https://console-docs.apipost.cn/preview/31c09380ce57b764/bdc657f8412f1b20?target_id=7e8606cc-6baa-4819-ae12-88f739619ab5

[4]code example： https://github.com/maicFir/lessonNote/tree/master/html/15-mock

最后，看完覺得有收獲的，點個贊，在看，轉發，收藏等于學會，原創不易，歡迎關注Web技術學苑，好好學習，天天向上！

文章轉自微信公眾號@itclanCoder

上一篇：

.NET Core微服務之路：基于Ocelot的API網關實現--http/https協議篇

下一篇：

Java 生鮮電商平臺 - API 接口設計之 token、timestamp、sign 具體架構與實現
#你可能也喜歡這些API文章!

我們有何不同？

API服務商零注冊

多API并行試用

數據驅動選型，提升決策效率

查看全部API→
??

熱門場景實測，選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費