Vue学习手记09-mock与axios拦截的使用

安装mock
npm install mockjs

安装axios
npm install axios

import axios from ‘axios‘
// 创建一个实例
const service = axios.create({
  //设置请求延迟时间
  timeout: 3000
})

//请求的拦截
service.interceptors.request.use(
  config => {
    return config
  },
  err => {
    console.log(err)
  }
)

//响应的拦截
service.interceptors.response.use(
  response => {
    let res = {}
    res.status = response.status
    res.data = response.data
    return res
  },
  err => console.log(err)
)

// 输出
export default service

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

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)
          }
        ]
      }
    }
  }
}

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