Notes Vue learn and use 09-mock interception of axios

01, installation

Installation mock 
npm install mockjs 

installed Axios 
npm install Axios

02, create a new file config.js do axios interception

Axios from Import 'Axios'
 // create an instance 
const-Service = axios.create ({
   // set the delay time request 
  timeout: 3000 
}) 

// intercept request 
service.interceptors.request.use ( 
  config => {
     return config 
  } , 
  ERR => { 
    the console.log (ERR) 
  } 
) 

// intercepted response 
service.interceptors.response.use ( 
  response => { 
    the let RES = {} 
    res.status = Response.Status 
    res.data = response.data
    return res
  },
  err => console.log(err)
)

// 输出
export default service

03, main.js introduced in entry file

import http from './api/config'
import './mock'
Vue.prototype.$http = http

04, the establishment of mock folder, and create a new file index.js, and references to other components disposed mock points out mock request data, to facilitate data acquisition sub-module

index.js

 

 home.js

import Mock from 'mockjs'

export default {
  getHomeData: () => {
    return {
      code: 20000,
      data: {
        videoData: [
          {
            name: 'SpringBoot',
　　　　　　　　//获取随机float
            value: Mock.Random.float(1000, 10000, 0, 3)
          },
          {
            name: 'iOS',
            value: Mock.Random.float(1000, 10000, 0, 3)
          },
          {
            name: 'php',
            value: Mock.Random.float(1000, 10000, 0, 3)
          },
          {
            name: 'h5',
            value: Mock.Random.float(1000, 10000, 0, 3)
          },
          {
            name: '小程序',
            value: Mock.Random.float(1000, 10000, 0, 3)
          }
        ]
      }
    }
  }
}

 

04, using (in use needs to request data interface)

 this.$http.get('/home/gatData').then(res => {
      console.log(res)
    })