mockjs讓前端開發獨立於後端

Jakeyu發表於2019-02-16
MockJS前端後端

mock.js 可以模擬ajax資料，攔截ajax請求，返回模擬資料，無需後端返回就可以測試前端程式

mockjs官網

原文：http://i.jakeyu.top/2016/08/1…

首先在head頭中引入我們需要的mockjs檔案

<script src="http://mockjs.com/dist/mock.js"></script>

在ajax請求之前，用mack定義返回資料

Mock.mock(`http://laoyu`, {
 "errorcode": 0,//0表示成功，1表示錯誤
 "message": "xx資訊不完整", //彈出錯誤資訊
});

在ajax中,open()的url要與mock中的相同，比如我這裡是http://laoyu,那麼

XHR.open（"post/get","http://laoyu",true/false）

好了，說到這裡，我們進行測試一下

<script>
//呼叫mock方法模擬資料
Mock.mock(`http://laoyu`, {
  "errorcode": 0,//0表示成功，1表示錯誤
  "message": "xx資訊不完整", //彈出錯誤資訊
});
//使用ajax進行測試
        var xhr = XMLHttpRequest();
        xhr.open("post","http://laoyu",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(null);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if((xhr.status>=200 && xhr.status<300) || xhr.status== 304){
                    var data = JSON.parse(xhr.responseText);  
                    //因為reponseText返回的是字串，將字串轉換成我們想要的JSON資料，這樣就可以呼叫了
                    console.log(data)；  //在控制檯中列印出返回的內容
                }else{
                    alert("Request was unsuccessful: " + xhr.status);
                }
            }
        }
</script>

看到沒，返回了我們使用mock模擬的資料，這樣就可以無需後臺，直接進行自己的測試了

xhr.readyState的五種狀態

0 － （未初始化）還沒有呼叫open()方法 
1 － （伺服器連線已經建立）已呼叫open()方法，正在傳送請求 
2 － （請求已接收）send()方法執行完成，已經接收到全部響應內容 
3 － （請求處理中）正在解析響應內容 
4 － （請求已完成）響應內容解析完成，可以在客戶端呼叫了

相關文章