前后端真正分離，網(wǎng)線被拔，也能請求數(shù)據(jù)（mock.js）

高璐發(fā)布于2019-05-23 13:53 / 3320人閱讀

摘要：六使用擴(kuò)展很多時候，服務(wù)器都有定義固定的返回值，如為則表示該請求有效。

做了一回標(biāo)題黨（別吐槽，說的大實話，真的可以不用后臺，就能拿數(shù)據(jù)，快！，向下看...）一、mock.js 是什么？

官網(wǎng)機(jī)票?

簡單的描述一下， mock.js 可以在后臺接口沒有更新時，來本地模擬數(shù)據(jù)達(dá)到測試界面功能的一個很方便的工具庫，mock.js 可以攔截ajax 請求，重指向并返回你定義的模板數(shù)據(jù)。更多細(xì)節(jié)，可查看官網(wǎng)。

二、安裝方式

? ? JS_CDN:??

? ?Yarn:

yarn add mockjs

? 其它安裝方式可看官網(wǎng)

三、簡易使用教程 Mock.mock()

@parmas rul {string} 攔截請求url 地址，需要與請求地址保持一直，不然無法攔截請求
@params rtype {string} 請求方式，如果不傳該參數(shù)，則post/get請求均可獲得匹配數(shù)據(jù)，
                       注意該字段需要全部小寫，否則無法匹配。
@params template {*} 默認(rèn)數(shù)據(jù) （最終請求返回結(jié)果）
@params function {function} options 為請求的數(shù)據(jù)，可在下面查看示例，這里不解釋了，
                            該函數(shù)結(jié)束需要return ,return 數(shù)據(jù)則為最終請求結(jié)果，
                            可根據(jù)options的參數(shù)，處理不同的邏輯

1. Mock.mock( template )

2. Mock.mock( rurl, template )

3. Mock.mock( rurl, function( options ) )

4. Mock.mock( rurl, rtype, template )

5. Mock.mock( rurl, rtype, function( options ) )

列舉基本的使用，更多細(xì)節(jié)描述，可查看官網(wǎng)。?

Mock.setup()

Mock.setup({
    timeout: 400 // 設(shè)置超時時間
})
Mock.setup({
    timeout: "300 - 6000" // 區(qū)間隨機(jī)超時時間
})
目前官網(wǎng)列舉的就一個參數(shù) timout (ajax 的請求超時時間)

Mock.Random?(該功能較多，只列舉部分常用的)?

  var Random = Mock.Random //聲明隨機(jī)函數(shù)對象var randomEmail = Random.email() //隨機(jī)生成郵箱
var randomBoolean = Random.boolean() //隨機(jī)生成布爾值
var randomBase64Img = Random.dataImage() //隨機(jī)生成圖片BASE 64 數(shù)據(jù)
var randomUrl = Random.url() //隨機(jī)生成Url 地址
var randomIp = Random.ip() //隨機(jī)生成ip 地址
var randomColor = Random.color() //隨機(jī)生成布爾值
/**
 @params size {String} 需要生成的圖片尺寸 （"600 X 300"）
 @params background {String} 生成圖片的背景色 默認(rèn)白色 （RBG）
 @params text {String} 生成圖片的中間文字 默認(rèn)為圖片尺寸
 @params format {Sting} 生成圖片的格式 默認(rèn)為png（可選：jpg/png/gif）
*/
Random.image()
Random.image( size )
Random.image( size, background )
Random.image( size, background, text )
Random.image( size, background, foreground, text )
Random.image( size, background, foreground, format, text )

官方的隨機(jī)支持功能很強(qiáng)大，也很全， 部分隨機(jī)函數(shù)可支持傳參，可定義適合場景的隨機(jī)數(shù)據(jù)，因為
功能太多了，無法一一列舉，可到官網(wǎng)尋找合適自己的。

官方支持隨機(jī)數(shù)據(jù)：

四、js 中的示例

let random = Mock.Random // 隨機(jī)函數(shù)

// 測試 get
Mock.mock("/get","get",{id: random.id(), name: "GET", email: random.email()})

// 測試 post
Mock.mock("/post","post",{id: random.id(), name: "POST", email: random.email()})

// 測試自定義模板
Mock.mock("/template","post", function (option) {
  console.log("我是自定義函數(shù)請求參數(shù)：", option)
  let data = {id: 1, name: "Template",image: random.image()}
  return data
})

  testRequest("/get", "GET") // 測試Get 請求
  testRequest("/post", "POST") // 測試Post 請求
  testRequest("/template", "POST", {key: "Test Params"}) // 測試Post 請求

  /**
   * @Description: Mock 測試請求
   */
  function testRequest (url, type,data = {}) {
    let baseUrl = ""
    $.ajax({
      url: baseUrl + url,
      type: type,
      data: data,
      dataType: "json",
      success: res => {
        console.log(res)
      },
    })
  }

五、Vue 中的使用

==> mock/index.js 

import Mock from "mockjs"

// 測試 get
Mock.mock("/get","get",{id: 1, name: "GET"})

// 測試 post
Mock.mock("/post","post",{id: 1, name: "POST"})

// 測試自定義模板
Mock.mock("/template","post", function (option) {
  console.log("我是自定義函數(shù)請求參數(shù)：", option)
  let data = {id: 1, name: "Template"}
  return data
})


==> main.js  // 在main.js 的代碼里引用模擬數(shù)據(jù)文件
*****
import "./mock/index.js"
*****

import axios form "axios"

// 測試get 請求
axios.get("/get").then(res => { console.log(res) }
// 測試post 請求
axios.post("/post").then(res => { console.log(res) }
// 測試自定義模板請求
axios.post("/post", {key: "Test Params"}).then(res => { console.log(res) }

踩坑注意：

?mock.js 的攔截地址，需要與請求地址保持一直，不然無法攔截請求

?mock.js 攔截的請求，不會出現(xiàn)在 network 請求列表中。

?mock.js? Mock.mock(..rtype)? rtype參數(shù)注意該字段需要全部小寫，否則無法匹配。

六、使用擴(kuò)展

很多時候，服務(wù)器都有定義固定的返回值，如code 為0 則表示該請求有效。那么我們可以封裝一個函數(shù)，每次返回數(shù)據(jù)前都調(diào)用函數(shù)，來格式化服務(wù)器固定的返回模板。

/**
 * @Description: 格式化mock 返回數(shù)據(jù)
 * @param data {*}  請求數(shù)據(jù)結(jié)果
 * @param code {number} 請求狀態(tài)值
 * @param msg {Sting} 請求狀態(tài)消息
*/
function formattingData (data, code = 0,msg) {
  return {
    data: data,
    code: code,
    msg: msg || (code === 0 ");"請求成功" : "請求失敗")
  }
}

 // 測試 get
 Mock.mock("/get","get",formattingData({id: 1, name: "GET"}))
 // 測試 get 請求失敗
 Mock.mock("/get/err","get",formattingData(undefined,1))