封装axios
import axios from 'axios'
// import store from '@/vuex/store.js'
import router from '../router'
import qs from 'qs' const instance = axios.create({}); instance.defaults.baseURL = 'http://mini.youhulianchuang.com';
instance.defaults.timeout = 5000;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
instance.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
instance.defaults.headers.post['top-token'] = 'top-token';
instance.defaults.responseType = 'json'; // 请求拦截
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('请求拦截')
console.log(config)
return config; }, function (error) {
// 对请求错误做些什么
// alert('网络错误,请稍后再试'); }); // 对传给后台的数据做统一的操作
instance.defaults.transformRequest=[function (data) {
// 对 data 进行任意转换处理 Object.assign(data,{age:21})
console.log(data)
return data; }] // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
instance.defaults.transformResponse=[function (data) {
// 对 data 进行任意转换处理
console.log(data) return data;
}] // 添加响应拦截器
instance.interceptors.response.use(function (response) {
console.log('添加响应拦截器')
console.log(response)
return response.data; }, function (error) {
// 对响应错误做点什么 if(error.response) { }
// return Promise.reject(error);
}); export default {
install: function(vm){
vm.prototype.$instance = instance;
}
2、调用
在main.js中引入封装文件并当作vue插件使用
import Utile from './lib/utils'
Vue.use(Utile)
3、在模块中使用get请求
this.$instance.get(`Employee/Detail/${this.$route.query.userId}`
).then((res)=>{
console.log(res.data)
if(res.data.code == 0){
操作
}
else{
}
})
4、在模块中使用post请求
this.$instance.post("/enumList",
params).then(({ data: { data = []} = {} })=>{
console.log(data)
})
.catch((error) =>{
console.log(error);
});
})
注:params是参数
封装axios的更多相关文章
- 【转】Vue 2.0封装axios笔记
前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...
- Vue笔记:封装 axios 为插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- 封装axios方法之一
一.先来说说为什么要封装axios异步请求. 我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react. 如何配置我这里就不说了. 然后...然后我们就会 ...
- vue 封装axios以及使用中间代理 proxy
为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件 用来存放接口地 ...
- 15、vue项目封装axios并访问接口
1.在src下新建util文件夹,在util下新建request.js文件: 封装axios: import axios from 'axios' import QS from 'qs'; // im ...
- Vue中封装axios
参考: https://www.jianshu.com/p/7a9fbcbb1114 https://www.cnblogs.com/dreamcc/p/10752604.html 一.安装axios ...
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- 创建Vue项目及封装axios
1. 始vue化项目 https://www.cnblogs.com/xiaonq/p/11027880.html vue init webpack deaxios # 使用脚手架创建项目 deaxi ...
- 封装axios在util中
创建util工具类,封装通用的get和post请求 封装axios成工具类,方便大家请求调用 1.创建util文件夹 2.创建request.js 3.封装 //封装请求相关方法 //初始化一个axi ...
随机推荐
- Linux设置允许指定端口通过防火墙centos7
开启防火墙 1.systemctl start firewalld.service(开启防火墙) 2.systemctl stop firewalld.service(开启防火墙) 3.service ...
- [经验交流] kubeadm 安装 kubernetes 一年过期的解决办法
kubeadm 是 kubernetes 提供的一个初始化集群的工具,使用起来非常方便.但是它创建的apiserver.controller-manager等证书默认只有一年的有效期,同时kubele ...
- zabbix3.2利用自动发现功能对fastcgi模式的php状态进行集中监控
zabbix3.2利用自动发现功能对fastcgi模式的php状态进行集中监控 前端nginx虚拟主机引用后端多个php接口,为了方便监控,将后端服务器集中配置在nginx中,具体配置如下: [roo ...
- 记一次较坑的eclipse安装AmaterasUML插件经历
先是最开始以为只用下载AmaterasUML插件压缩包,解压之后把三个jar包放进eclipse-plugins目录之后重启就可以了,结果发现重启之后毫无反应orz 于是又去查资料,发现还需要安装GE ...
- 【Python】Flask中@wraps的使用
先说总结,白话来讲,@wraps相当于是装饰器的装饰器. python内置的方法使用解释,看起很复杂的样子┓( ´∀` )┏ def wraps(wrapped, assigned = WRAPPER ...
- 修改Maven仓库路径
我自己新建的地址:D:\apache-maven-3.6.0\repository 找到:localRepository,修改为自定义的位置 在IDEA里面进行配置 这样项目的maven仓库地址就修改 ...
- nginx rewrite规则笔记
优先级 在nginx的location和配置中location的顺序没有太大关系.正location表达式的类型有关.相同类型的表达式,字符串长的会优先匹配. 第一优先级:等号类型(=)的优先级最高. ...
- shell 变量、参数、数组章节笔记
// 变量名和等号之间不能有空格 hello="123456"; echo $hello; // 花括号只是帮助识别变量边界 echo ${hello}; // unset 删除变 ...
- 设计模式 — 单例模式(Singleton)
在一个软件系统中,经常有有些特殊的对象就需要一个实例,如果有多个的话,就比较浪费服务器资源,最典型的就是 整个系统的配置文件对象. 普通方式读取配置文件 // 配置文件 SingletonApp.pr ...
- Dubbo序列化多个CopyOnWriteArrayList对象变成同一对象的一个大坑!!
环境: win10 + jdk 1.8 + dubbo 2.5.10 问题描述: 当一个对象(此对象内包含多个CopyOnWriteArrayList对象) 作为参数调用RPC接口后, 服务提供者拿到 ...