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

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拦截的使用的更多相关文章

  1. AntDesign vue学习笔记(二)axios使用

    之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入 1.mainjs中引入axios,设置基础url import axios from 'axios' ax ...

  2. Vue学习手记04-跨域问题

    01-安装axios,指令(npm install --save axios)02-解决跨域问题 在config=>中创建一个新的文件proxyConfig.js module.exports ...

  3. Vue学习手记01-安装和项目创建

    1.安装Vue  注:node版本必须大于等于8.9  vue-cli3.x:npm install -g @vue/cli  vue-cli2.x:npm install -g @vue/cli-i ...

  4. Vue学习手记08-vue-cli的启动过程

    分两种情况---无路由和有路由 无路由 看到启动页面 在文件main.js( vue项目的入口文件)中 这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html ...

  5. Vue学习手记03-路由跳转与路由嵌套

    1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...

  6. Vue学习手记02 - 路由

    1.项目  注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...

  7. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  8. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  9. 学习不一样的vue4:mock与axios实战1

    学习不一样的vue4:mock与axios实战1  发表于 2017-06-14 |  分类于 web前端|  |  阅读次数 8180 首先 首发博客: 我的博客 项目源码: 源码(喜欢请star) ...

随机推荐

  1. 动态修改app build版本CFBundleVersion

    1.需求说明 2.操作步骤 2.1 新建脚本,选择Build Phases 2.2 点击加号,选择New Run Script Phase 2.3 为了便于识别,双击重命名为 Dynamic Buil ...

  2. 判断是否发生url跳转

    url="https://www.baidu.com/" url='http://www.freebuf.com/fevents/133225.html' # 方法一:禁止跳转:a ...

  3. Mysql 存储过程 + python调用存储过程 (内置函数讲解及定义摘抄)

    定义 存储过程:就是为以后的使用而保存的一条或多条 MySQL语句的集合.可将其视为批文件,虽然它们的作用不仅限于批处理. 个人使用存储过程的原因就是因为 存储过程比使用单独的SQL语句要快 有如下表 ...

  4. sql写法,子节点名称拼接上级节点名称

    with T(id,[name],pid) as(select 1,N'中国',-1 union allselect 2,N'山东',1 union allselect 3,N'济南',2 union ...

  5. ccze - A robust log colorizer(强大的日志着色器)

    这些程序遵循通常的GNU命令行语法,长选项以两个破折号(` - ')开头.选项摘要如下. -a, - argument PLUGIN = ARGUMENTS              使用此选项将AR ...

  6. java 静态代码块和spring @value等注解注入顺序

      java 静态代码块和spring @value等注解注入顺序 问题所在 先上代码 java方法 @Value("${mf.cashost}") public static S ...

  7. pyspark minHash LSH 查找相似度

    先看看官方文档: MinHash for Jaccard Distance MinHash is an LSH family for Jaccard distance where input feat ...

  8. 不安装Oracle客户端使用PLSQL Developer

    一.下载 1.Oracle Instant Client: (需要安装 Visual Studio 2013 redistributable.) basic-windows.x64-18.5下载地址: ...

  9. 如何获取一个Java对象所占内存大小

    新建一个maven工程 我们先在IDEA中新建一个名为ObjectSizeFetcherAgent的maven工程,如下图: 在maven项目中的pom.xml中新增一个打jar包的插件,如下: &l ...

  10. Eclipse中安装Spring IDE

    ====>在线安装 1.寻找Spring IDE插件更新地址:http://marketplace.eclipse.org/content/spring-ide 2.复制对应Eclipse版本的 ...