調用后端接口是筋斗云框架提供的兩大核心功能之一。

[任務]

繼續hello頁面的例子，要求每次進入頁面時，不是固定的顯示”hello, world”，而是需要根據服務端的返回內容來顯示hello的內容，比如”hello, skys”或是”hello, jdcloud”。

我們先定義一個叫做”hello”的交互接口，由前端發起一個HTTP GET請求，比如：

如果調用成功，后端返回JSON格式的數據如下：

其中0是返回碼，表示調用成功。如果調用失敗，可返回：

以上就是一個符合筋斗云接口規范的簡單例子（稱為業務查詢協議-BQP），在成功調用時應返回[0, data]，在調用失敗時應返回[非0, 錯誤提示信息]。

有了清晰的接口定義，前后端就可以并行開發了。 在前端，我們把頁面稍作修改以動態顯示hello的內容：

再寫一段邏輯，每當進入頁面時調用hello接口并顯示內容，我們選擇onBeforeShow回調來做這件事：

callSvr是框架提供的一個重要函數，它封裝了Ajax調用的細節，完整的函數原型為：

其中，ac是調用接口名，fn是回調函數，param和postParam分別是URL參數和POST參數。除ac外，其它參數均可省略。例如

回調函數api_hello僅在成功時被調用，參數data是實際數據，即[0, data]中的data部分，不包括返回碼0。 當調用失敗時，框架會統一處理，顯示錯誤信息，無須操心。

調用模擬接口

上面代碼寫好了，后端接口還沒做好怎么測試？

筋斗云支持模擬接口返回數據。 在mockdata.js中，可以設置接口的模擬返回數據：

此處還可以用函數做更復雜的基于參數的模擬，詳見API文檔，查詢MUI.mockData。

運行H5應用，進入hello頁面，看看是不是可以正常顯示了？

可以動態修改模擬數據，在控制臺中輸入：

然后從hello頁返回首頁，再進入hello頁，看看顯示內容是不是變了？

再改一個出錯的試試：

進入hello頁，我們看到，調用失敗時，回調函數api_hello沒有執行，而是框架自動接管過去，顯示出錯信息。

調用真實接口

在后端接口開發好后，我們可去掉對這個接口的模擬，直接遠程調用服務端接口。這需要配置好后端接口的地址。

我們用php寫一個簡單的符合筋斗云接口規范的后端實現，通過名為”ac”的URL參數表示接口名，在server目錄中創建文件api.php如下：

配置好php的調用環境后，訪問

輸出類似這樣（根據時間動態變化）：

回到前端，我們在app.js中設置服務端接口地址：

serverUrl選項設置了服務端的URL地址，因為我們將”api.php”放在與”index.html”同一目錄下，所以直接用相對路徑就可以了。serverUrlAc選項定義了接口名對應的URL參數名稱，即?ac={接口名}. 在mockdata.js中去掉對”hello”接口的模擬，刷新應用就可以看到調用后端的效果了。

如果前后端不在同一臺服務器上，則要將URL寫完整，如

注意：后端應設置好允許跨域請求。這里不做詳述。

以上講述的是符合筋斗云接口規范的接口調用設置，如果不符合該規范，請閱讀下一節“接口適配”。

接口適配

在上例中，假定了后端接口兼容筋斗云接口規范，例如返回格式為[0, jsonData]及[非0, 錯誤信息]。 如果接口協議不兼容，則需要做接口適配。

接口適配的目標是通過callSvr函數更加簡練地調用后臺接口，同時達到：

[任務]

適配以下接口協議規范，約定接口返回格式為：{code, msg, data}， 例如上例中的hello接口，調用成功時返回：

失敗返回：

這時需要對callSvr進行適配，可以在app.js中，設置 MUI.callSvrExt如下:

我們在mockdata.js中設置好模擬數據用于測試：

上例中，User.get接口在顯示首頁是會調用，所以和”hello”接口一并模擬下。

測試接口調用：

callSvrSync是callSvr的同步調用版本，它直接等到調用完成才返回，且返回值就是調用成功返回的數據。

可以動態修改模擬數據：

在接口適配完成后，應用層代碼不用去做任何修改。 進入頁面看看，是不是和上節的運行結果是一樣的。