vue 使用mock來模擬數據

首先，需要安裝mock

npm install mockjs --save-dev

在main.js中引入mock

mock文件寫法如下：

const Mock = require('mockjs')
// 使用mockjs模擬數據
let data = Mock.mock({
  // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
  'list|1-10': [{
    // 屬性 id 是一個自增數，起始值為 1，每次增 1
    'id|+1': 1
  }]
})
Mock.mock('/api/data', 'get', (req, res) => {
  return {
    success: true,
    data: data,
    msg: '成功'
  }
})

在vue文件中調用接口進行測試

this.$get('/api/data')
      .then((response) => {
        console.log(response)
      })

頁面打印結果如下

 

中途出現404，報錯代碼如下：

 

后面發現是axios進行了接口攔截，把這段代碼注釋掉或者在mock的返回參數中加上和攔截器對應的參數即可。

// 返回狀態判斷
axios.interceptors.response.use((res) => {
  if (!res.data.success) {
    return Promise.reject(res)
  }
  return res
}, (error) => {
  // 404等問題可以在這里處理
  return Promise.reject(error)
})