[Web 前端] mockjs讓前端開發獨立於後端

cp  from  : https://www.codercto.com/a/9839.html

mock.js 能夠模擬ajax數據，攔截ajax請求，返回模擬數據，無需後端返回就能夠測試前端程序

引入文件 

首先在head頭中引入咱們須要的mockjs文件

<script src="//upyun1.codercto.com/images/1x1.png" data-original="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 = new 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 － （請求已完成）響應內容解析完成，能夠在客戶端調用了

連接：https://www.codercto.com/a/9839.html
來源：Coder·碼農
本文發佈於 Coder·碼農，轉載請註明出處，謝謝合做！