在開發(fā)中，前端的界面交互已經(jīng)寫好，但是后端的接口還沒有寫好，這個(gè)時(shí)候就需要前端自己寫一些假數(shù)據(jù)進(jìn)行模擬，但是如果有大量的界面數(shù)據(jù)的話，本地寫假數(shù)據(jù)是非常龐大的工作量，而且后期的替換接口也比較麻煩，所以使用線上的moke數(shù)據(jù)就非常有必要了，調(diào)的是真實(shí)的api,只需要自己在線上寫一些假數(shù)據(jù)，和后端約定好字段名，后期直接修改請(qǐng)求路徑就好了。

• 這里推薦使用的是fastmock，非常便捷的一個(gè)線上moke數(shù)據(jù)網(wǎng)站，網(wǎng)址（https://www.fastmock.site）

• 使用也比較簡(jiǎn)單，注冊(cè)一個(gè)賬號(hào)，在界面里面新建項(xiàng)目。

  
  
• 項(xiàng)目剛進(jìn)去是沒有接口的，需要自己創(chuàng)建接口?？梢栽O(shè)置請(qǐng)求的類型，和請(qǐng)求的url，在編輯器里面編輯json格式的數(shù)據(jù)，（支持moke.js語(yǔ)法，參考moke.js官網(wǎng)）。
  
  image.png

• 設(shè)置完成之后點(diǎn)擊保存。就可以看到設(shè)置好的接口。

  
  
  image.png
• 根據(jù)接口的根地址進(jìn)行請(qǐng)求。代碼如下。

let xhr=new XMLHttpRequest();
   xhr.open("get","https://www.fastmock.site/mock/4ffaa183ddf5050756885ff033a2636b/xukeler/user",true);
   xhr.send();
   xhr.onreadystatechange=function(){
       if(xhr.status==200&&xhr.readyState==4){
           console.log(xhr.responseText)
       }
   }

• 返回的數(shù)據(jù)

  
  
  image.png