呼叫後端介面

天笑發表於2017-02-05

呼叫後端介面是筋斗雲框架提供的兩大核心功能之一。

[任務]

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

我們先定義一個叫做"hello"的互動介面,由前端發起一個HTTP GET請求,比如:

http://myserver/myproject/api.php?ac=hello

如果呼叫成功,後端返回JSON格式的資料如下:

[0, "jdcloud"]

其中0是返回碼,表示呼叫成功。如果呼叫失敗,可返回:

[99, "對不起,伺服器爆炸了"]

以上就是一個符合筋斗雲介面規範的簡單例子(稱為業務查詢協議-BQP),在成功呼叫時應返回[0, data],在呼叫失敗時應返回[非0, 錯誤提示資訊]

有了清晰的介面定義,前後端就可以並行開發了。 在前端,我們把頁面稍作修改以動態顯示hello的內容:

    <div class="bd">
        <p>Hello, <span id="what"></span></p>
    </div>

再寫一段邏輯,每當進入頁面時呼叫hello介面並顯示內容,我們選擇onBeforeShow回撥來做這件事:

function initPageHello() 
{
    var jpage = $(this);
    jpage.on("pagebeforeshow", onBeforeShow);

    function onBeforeShow()
    {
        callSvr("hello", api_hello);
    }

    function api_hello(data)
    {
        jpage.find("#what").html(data);
    }
}

callSvr是框架提供的一個重要函式,它封裝了ajax呼叫的細節,完整的函式原型為:

callSvr(ac, param?, fn?, postParam?, options?);

其中,ac是呼叫介面名,fn是回撥函式,param和postParam分別是URL引數和POST引數。除ac外,其它引數均可省略。例如

callSvr("hello");
callSvr("hello", {id: 1}); // URL: hello?id=1
callSvr("hello", {id: 1}, api_hello); // function api_hello(data) {}
callSvr("hello", api_hello, {name: "hello"});

回撥函式api_hello僅在成功時被呼叫,引數data是實際資料,即[0, data]中的data部分,不包括返回碼0。 當呼叫失敗時,框架會統一處理,顯示錯誤資訊,無須操心。

相關文章