對於前端工程師，測試 ajax 介面有什麼好方法？

12-30

前後台通過ajax介面或是jsonp介面協作時，需要對介面進行測試，特別是後台沒有寫介面文檔的情況下。
我目前都是修改js代碼，做對應假數據作為參數，然後在chrome控制台查看返回值等。這樣效率相對比較低。
有沒有什麼好的方法方便前端工程師去做ajax介面測試呢？比如很方便的修改參數，查看返回值等？而不是修改js代碼，最好是隸屬於前端的工具，或是瀏覽器插件等。
也可能是我們前端常用的工具，只是我們沒有發覺的黑科技呢？前端兄弟們，都是怎麼測試ajax介面的呢？為了提高基於介面的前端開發效率，一起討論交流哈。

可以用我寫的小東西puer：http://github.com/leeluolee/puer

只需要

puer -t http://localhost:8020 -a route.js

一條命令就可解決你的燃煤之急。其中-t 參數是實際的開發伺服器，如果沒有被route.js匹配到的請求會被轉發到這裡

其中本地mock的route.js

// use addon to mock http request module.exports = { // GET "GET /v1/posts/:id": function(req, res, next){ // response json format res.send({ title: "title changed", content: "tow post hahahah" })


  },

  // PUT POST DELETE is the same

  "PUT /v1/posts/:id": function(){
  },

  "POST /v1/posts": function(){
  },

  "DELETE /v1/posts/:id": function(){

} }

應該不需要說明了吧。route.js的所有修改都是『熱更新』的，因為作者懂你，知道mock介面是會頻繁改動的。

1.x版本所有的本地mock介面優先順序高於代理介面。 2.x可以進行配置優先順序但還沒發布，先將就用吧

這個工具是個簡單的小雜燴， 但它確實改善了我開發各階段的前後端開發不協調時的開發體驗，完整文檔可以看下我的這個博客超簡單工具puer——「低碳」的前後端分離開發

後端工程師必須要有介面文檔，並且能夠提供在線模擬請求的功能，這個東西搞搞不難，不行你幫他們寫界面，讓他們把文檔渲染出來也行。

例如我們公司的nodejs伺服器的文檔，我們有個中間件，會把所有的route配置收集起來，每個route我們會附帶一個doc，這個doc描述了這個介面的功能，以及可用的參數和注釋。這個中間件最後會自動把文檔生成一個頁面，裡面是所有的介面列表，打開一個介面即可請求實際的介面，這玩意真沒那麼複雜。

相信我，問完了這個問題你以後會繼續問，git用什麼客戶端好啊。命令行怎麼用好啊。ftp怎麼用啊之類的。

而這些，webstorm通通給你解決。什麼restfull測試啊。nodejs調試啊。跨平台啊。完全沒問題。

等用電腦給你補幾張圖。

-----------------分割線---------------------

這是一個登陸介面的測試，我一共設置了這幾個地方：

1、HTTP method設置為POST

2、Host/port 設置為 "http://develop.endaosi.com:8110/"

3、Path 設置為 "api/v1/auth/login"

4、增加了Headers一對

Content-Type: application/x-www-form-urlencoded

5、設置了text的Request為

email=guestpassword=123456

然後運行，就能看到後端返回了session_id和user數據。說明登陸成功。

感覺樓主需要的是 Postman 這個工具。測試API專用。

如果是mac下，可以花錢購買 Paw，和 Postman 比較類似。

最好的辦法是自己搭建一個本地 server，來模擬介面返回的數據。當然，這個相對前端工程師來說比較麻煩，所以，我寫了一個 nodejs 版的 server，只需一行命令和寫個簡單的配置文件，就可以實現介面模擬，相對於前端工程師來說，非常友好。

github：GitHub - hanan198501/imitator: 一個簡單的nodejs伺服器，可以實現數據模擬，靜態資源映射，HTTP代理等服務。

快速上手

1. 安裝——首先你要先安裝 nodejs 和 npm，然後全局安裝imitator。

npm install imitator -g

2. 編寫配置文件——在你的用戶目錄(比如我的是/User/hanan)下新建一個名為Imitatorfile.js 的文件（這是 imitator 的默認配置文件），內容如下。

module.exports = function(imitator) { // 返回一個json imitator("/json", {name: "hello world"}); }

3. 啟動服務——命令行輸入以下命令，啟動 imitator server.

imitator

4. 瀏覽器訪問 127.0.0.1:8888/json ，將會看到：

{"name":"hello world"}

命令行參數

imitator 命令接受2參數：

-p 設置 imitator server 的埠號，默認是8888。

-f 設置配置文件的路徑，支持相對路徑和絕對路徑，默認為：用戶目錄/Imitatorfile.js 。

下面的命令將使用 9000 埠， /home/myconfig.js 這個文件作為配置文件來啟動 imitator server 。

imitator -p 9000 -f /home/myconfig.js

配置文件

imitator 的配置文件是其實就是一個 nodejs 模塊， module.exports 是一個函數，接受一個參數：imitator 。通過調用 imitator(option) 來設置一條規則。

其中 option 是規則的參數對象。如：

module.exports = function(imitator) { imitator({ url: "/json", // 匹配的url result: {name: "json test"} // 返回的內容 }); }

如上，當請求地址匹配到 /json 這個路徑的時候，就會返回 {name: "json test"} 的json字元串。

當 option 中只包含 url，result 兩個參數時，可以簡寫成 imitator(url, result) 的形式，上面的例子可以寫成：

module.exports = function(imitator) { imitator("/json", {name: "json test"}); }

更多示例詳見：imitator/Imitatorfile.js at master · hanan198501/imitator · GitHub

fiddler天然神器。用過都說好。

supertest

我們現在整體遷移到了npm包管理,因為代碼是基於react和webpack來開發的.

於是就用了superagent來發ajax請求,它有一個第三方插件"superagent-mock"來mock ajax的返回值.

以前用的是阿里的mockjs.

我的做法是隨便用 Node.js 寫一個 Server，然後用 Charles 把請求轉發到我的 node 上……

在線HTTP介面測試

或者在chrome的console也可以測試。$.get(url);

瀏覽器直接測試介面不是很自然嗎？裝上JsonView會自動格式化返回數據

Chrome https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en

Firefox JSONView :: Add-ons for Firefox

如果要POST，插件也不少啊

https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?hl=en-US

題主，我自己用nodejs寫了一個代理小工具，同事們用完之後都覺得還可以。所以在這裡分享給你：

https://github.com/a6051529/uyes_proxy

由於目前只在內部使用，暫時沒有整理使用文檔，過段時間會寫一份使用文檔 = 。=

原理如下：

首先在本機跑一個node伺服器。
然後監聽瀏覽器的埠。
瀏覽器發出去的所有請求都會被nodejs伺服器攔截下來，此時在伺服器里判斷，如果為api介面就轉發到數據伺服器上面去。如果為靜態資源文件就從本地文件夾讀取。
這樣就保證了您本地開發的高效性，這個數據伺服器可以是你們的測試伺服器，也可以是你們同事的電腦，此時把數據伺服器的地址改為你同事的IP即可。
同時也保證了你在本地即時修改js或html的時候能即時結合數據測試。特別方便。

是不是很簡單呢？

測後台介面用postman，測前台功能要模擬後台數據直接fiddler/charles代理本地文件

Postman https://www.getpostman.com/

Mock

1. 使用 Mockjs，不僅攔截 AJAX 請求，還能模擬數據

2. 自己搭建一個 server，然後用 fiddler / Charles 映射請求地址到本地server

把api數據mock一份，存儲在客戶端js里。劫持ajax請求，返回mock數據。

postman啊

curl

fiddler