02 axios

request.js

import axios from 'axios'
const config = require('@/config') const instance = axios.create({
baseURL: config.baseUrl,
timeout: 15 * 1000 // 15s timeout
}) instance.interceptors.request.use(
function(config) {
// 在发送请求之前做些什么
return config
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error)
}
) // 添加响应拦截器
instance.interceptors.response.use(
function(response) {
// 对响应数据做点什么
const data = response.data
if (data.resCode !== 0) {
return Promise.reject(data) // 人为走catch代码
}
return response.data
},
function(error) {
// 对响应错误做点什么
return Promise.reject(error)
}
) export function get(url, params) {
return instance.get(url, {
params: params
})
}
export function post(url, params) {
instance.defaults.headers.post['Content-Type'] = 'application/json'
return instance.post(url, JSON.stringify(params))
}
news.js
import { get, post } from './request'
function getNewsList(params) {
return get('/newsList', params)
}
function updateList(params) {
return post('/updateNewsList', params)
}
export default {
getNewsList,
updateList
}
user.js
import { post } from './request'
function getSms(params) {
return post('/getSms/', params)
}
function register(params) {
return post('/register/', params)
}
function login(params) {
return post('/login/', params)
}
export default {
getSms,
register,
login
}
index.js
// 实现自动化导入import。
const context = require.context('./', false, /\.js$/)
console.log(context.keys()) // ["./index.js", "./news.js", "./request.js", "./user.js"]
let res = {}
context.keys().forEach(filePath => {
if (['./index.js', './request.js'].includes(filePath)) return
const value = context(filePath).default
res = { ...res, ...value }
}) export default res
main.js
import api from './network'
Vue.prototype.$api = api
02 axios的更多相关文章
- 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
[手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...
- 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token
//使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- 06-vue项目02:vuex、Mutation、Action、ElementUI、axios
1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...
- python接收axios的post请求,并处理后返回数据
公司的python工程师不会js和python数据交互,所以我就去试了一下. 首先安装python,django框架和django-cors-headers. python官网下载,按提示操作,记住最 ...
- 二: vue的属性及功能,axios
一: 过滤器 1. 定义: 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 2.使用vue.filter()进行全局定义 ...
- 搭建vue脚手架,包含Axios、qs、Element-UI、mock等插件的安装配置
1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4 安装 Mock 2.新建一个vue工程, ...
- Axios & fetch api & Promise & POST
Axios & fetch api & Promise & POST https://github.com/axios/axios https://appdividend.co ...
- 【转】axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
随机推荐
- Python3中,map()函数、filter()函数、reduce()函数的比较
1.map(function,iterable):function为函数,或者lambda表达式,iterable是可迭代的序列,即对iterable中的每个item执行一遍function或者lam ...
- IDEA中配置Maven
目录 一.IDEA 集成 Maven 二.IDEA 创建 Maven 版 java 工程 1. 创建 maven 版 java 工程 2. 填写 maven 工程的坐标 3. 填写工程名和存储路径 4 ...
- 1)uboot的编译和烧写
购买荔枝派ZERO已经将近一个星期了,由于官方资料不够完整一直没有任何进展.经过今夜近三个小时的折腾终于将UBOOT烧写成功,现将过程记录如下: 1)获取官方uboot 源码 : git clone ...
- salesforce零基础学习(九十九)Git 在salesforce项目中的应用(vs code篇)
本篇参考: https://code.visualstudio.com/docs/editor/versioncontrol https://git-scm.com/doc https://git-s ...
- java 字符串缓冲区与正则表达式
一 字符串缓冲区 1.StringBuffer类 查阅StringBuffer的API,StringBuffer又称为可变字符序列,它是一个类似于 String 的字符串缓冲区,通过某些方法调用可以改 ...
- 2020-06-21:ZK的哪些基础能力构建出了哪些上层应用?
福哥答案2020-06-21: 福哥口诀法:数负命Ma集配分(使用场景:数据发布订阅.负载均衡.命名服务.Master 选举.集群管理.配置管理.分布式队列和分布式锁) 数据发布订阅:dubbo的rp ...
- C#LeetCode刷题之#232-用栈实现队列(Implement Queue using Stacks)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4108 访问. 使用栈实现队列的下列操作: push(x) -- ...
- Vue 如何优雅的根据条件动态显示组件
常规情况下,在里动态加载不同组件的方式为: <template> <!-- 符合条件A,加载组件A --> <BusinessComponentA v-if=" ...
- Spring同时集成JPA与Mybatis
@ 目录 ORM Spring ORM Spring ORM 同时集成JPA与Mybatis 一.创建一个SpringBoot项目 二.建立用户信息登记表 三.Web应用项目集成mysql 四.添加S ...
- python智能图片识别系统(图片切割、图片识别、区别标识)
@ 目录 技术介绍 运行效果 关键代码 写在最后 技术介绍 你好! python flask图片识别系统使用到的技术有:图片背景切割.图片格式转换(pdf转png).图片模板匹配.图片区别标识. 运行 ...