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

01、安装

安装mock
npm install mockjs

安装axios
npm install axios

02、新建一个config.js文件做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

03、在入口文件main.js引入

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

04、建立mock文件夹,并新建index.js文件,用于设置mock和引用其他组件分出来的mock请求数据,便于数据分模块获取

index.js

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

 

 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、使用(在需要请求数据的界面使用)

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

 

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

上一篇:Android MotionEvent事件响应机制


下一篇:Android安卓手机游戏开发