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
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拦截的使用的更多相关文章
- AntDesign vue学习笔记(二)axios使用
之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入 1.mainjs中引入axios,设置基础url import axios from 'axios' ax ...
- Vue学习手记04-跨域问题
01-安装axios,指令(npm install --save axios)02-解决跨域问题 在config=>中创建一个新的文件proxyConfig.js module.exports ...
- Vue学习手记01-安装和项目创建
1.安装Vue 注:node版本必须大于等于8.9 vue-cli3.x:npm install -g @vue/cli vue-cli2.x:npm install -g @vue/cli-i ...
- Vue学习手记08-vue-cli的启动过程
分两种情况---无路由和有路由 无路由 看到启动页面 在文件main.js( vue项目的入口文件)中 这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html ...
- Vue学习手记03-路由跳转与路由嵌套
1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...
- Vue学习手记02 - 路由
1.项目 注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
- 学习不一样的vue4:mock与axios实战1
学习不一样的vue4:mock与axios实战1 发表于 2017-06-14 | 分类于 web前端| | 阅读次数 8180 首先 首发博客: 我的博客 项目源码: 源码(喜欢请star) ...
随机推荐
- 动态修改app build版本CFBundleVersion
1.需求说明 2.操作步骤 2.1 新建脚本,选择Build Phases 2.2 点击加号,选择New Run Script Phase 2.3 为了便于识别,双击重命名为 Dynamic Buil ...
- 判断是否发生url跳转
url="https://www.baidu.com/" url='http://www.freebuf.com/fevents/133225.html' # 方法一:禁止跳转:a ...
- Mysql 存储过程 + python调用存储过程 (内置函数讲解及定义摘抄)
定义 存储过程:就是为以后的使用而保存的一条或多条 MySQL语句的集合.可将其视为批文件,虽然它们的作用不仅限于批处理. 个人使用存储过程的原因就是因为 存储过程比使用单独的SQL语句要快 有如下表 ...
- sql写法,子节点名称拼接上级节点名称
with T(id,[name],pid) as(select 1,N'中国',-1 union allselect 2,N'山东',1 union allselect 3,N'济南',2 union ...
- ccze - A robust log colorizer(强大的日志着色器)
这些程序遵循通常的GNU命令行语法,长选项以两个破折号(` - ')开头.选项摘要如下. -a, - argument PLUGIN = ARGUMENTS 使用此选项将AR ...
- java 静态代码块和spring @value等注解注入顺序
java 静态代码块和spring @value等注解注入顺序 问题所在 先上代码 java方法 @Value("${mf.cashost}") public static S ...
- pyspark minHash LSH 查找相似度
先看看官方文档: MinHash for Jaccard Distance MinHash is an LSH family for Jaccard distance where input feat ...
- 不安装Oracle客户端使用PLSQL Developer
一.下载 1.Oracle Instant Client: (需要安装 Visual Studio 2013 redistributable.) basic-windows.x64-18.5下载地址: ...
- 如何获取一个Java对象所占内存大小
新建一个maven工程 我们先在IDEA中新建一个名为ObjectSizeFetcherAgent的maven工程,如下图: 在maven项目中的pom.xml中新增一个打jar包的插件,如下: &l ...
- Eclipse中安装Spring IDE
====>在线安装 1.寻找Spring IDE插件更新地址:http://marketplace.eclipse.org/content/spring-ide 2.复制对应Eclipse版本的 ...