Vue中使用mock.js攔截Ajax 請求

mock.js可以生成隨機數據，攔截 Ajax 請求返回模擬的響應數據，讓前端攻城師獨立於后端進行開發。

開始使用吧。

1.npm下安裝

npm install mockjs --save

2.在vue項目中創建mock.js

 

 在mock.js中引入mockjs，添加一個login的接口如下：

import Mock from 'mockjs'

Mock.mock('/api/login',
  {
    'message': 'success'
  }
)

在使用mock.js的頁面中引入mock.js，另外使用axios進行請求，因此也要引入

import axios from 'axios'
import '@/mock/mock'

使用方法：

axios.get('/api/login')
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.log(err)
  })

console顯示如下：

 

3.為了更真實也可以給指定被攔截的 Ajax 請求的響應時間

在mock.js中添加

Mock.setup({
  timeout: 3000
})

可以看到刷新頁面3s之后才有返回。

4.mock.js能支持各種格式的數據，參考官網 http://mockjs.com/

示例中/api/user就用mock.js模擬了隨機返回幾個用戶信息列表的接口。

mock.js完整代碼如下：

import Mock from 'mockjs'

Mock.setup({
  timeout: 1000
})
Mock.mock('/api/login',
  {
    'message': 'success'
  }
)

Mock.mock('/api/user',
  {
    'array|1-10': [
      {
        'name': '@cname',
        'age|20-40': 25,
        'gender|1': ['male', 'female']
      }
    ]
  }
)

 注：這樣的寫法就是導入時執行該js文件，先讓mock的接口生效，后面才能對ajax進行攔截