import axios from 'axios'
import router from '@/router'
axios.defaults.baseURL = system.requestBaseUrl; // 配置axios请求的地址
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.crossDomain = true;
// axios.defaults.withCredentials = true; //设置cross跨域 并设置访问权限 允许跨域携带cookie信息
axios.defaults.headers.common['Authorization'] = ''; // 设置请求头为 Authorization
// 请求拦截器
axios.interceptors.request.use(
config => {
//验证登录,并将token放入header
let url = config.url;
// console.log('url+======'+url)
var token = sessionStorage.getItem('token');
if (url == '/user/sendMsgCode') {
token = 'token';
}
if (!token) { //未登录
//进入登录页
if (sessionStorage.getItem('uname')) {
sessionStorage.clear()
Modal.error({
title: '登录失效或请求失败!',
content: '',
onOk() {
router.push('/login');
location.reload(); //强制刷新
}
});
return
}
router.push('/login');
}
// console.log(config);
config.headers['token'] = token; return config;
},
error => {
return Promise.error(error);
}
); axios.interceptors.response.use(
response => {
// console.log('response',response);
// 否则的话抛出错误
if (response.status === 200) { //
if (response.headers['token']) { //刷新token
// console.log(response.headers['token']);
sessionStorage.setItem('token', response.headers['token']);
}
if (response.headers['verifyCode']) { //验证码
sessionStorage.setItem('verifyCode', response.headers['verifyCode']);
}
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
if (error.response && error.response.status) {
switch (error.response.status) {
case 401:
//删除token
sessionStorage.removeItem('token');
let path = router.history.current.path;
console.log('path', path)
if (path != '/login') { //登录页和初次进首页不需要确认提示
if (path == '/') { //直接进首页
router.push('/login');
} else {
toLogin();
}
}
break; case 403:
// vant.Toast.fail("登录过期,请关闭重新进入。");
// 清除token
break; // 404请求不存在
case 404:
// vant.Toast.fail("您访问的网页不存在。");
break;
// 其他错误,直接抛出错误提示
default:
// vant.Toast.fail(error.response.data.message);
}
return Promise.reject(error.response); } else { //未知异常
if (error == 'Error: Network Error') { //网络请求失败
let path = router.history.current.path;
if (path != '/login') { //登录页和初次进首页不需要确认提示
Modal.error({
title: '登录失效或请求失败!',
content: '',
onOk() {
router.push('/login');
location.reload(); //强制刷新
}
});
}
}
}
}); axios.$get = function (url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
})
}
axios.$downLoad = function (url, params) {
return new Promise((resolve, reject) => {
axios({
url: url,
params: params,
method: 'get',
responseType: 'blob'
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
})
}
// 用于获得头部传过来的文件名信息
axios.$downLoad1 = function (url, params) {
return new Promise((resolve, reject) => {
axios({
url: url,
params: params,
method: 'get',
responseType: 'blob'
}).then(res => {
resolve(res);
}).catch(err => {
reject(err)
})
})
}
axios.$delete = function (url, params) {
return new Promise((resolve, reject) => {
axios.delete(url, {
params: params
}, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
})
}
axios.$post = function (url, params, headers_) {
var headers = headers_ ? {
'Content-Type': 'application/x-www-form-urlencoded'
} : headers_;
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params), {
headers: headers,
}).then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
})
}
axios.$post1 = function (url, params, headers_) {
var headers = headers_ ? {
'Content-Type': 'application/x-www-form-urlencoded'
} : headers_;
return new Promise((resolve, reject) => {
axios.post(url, (params), {
headers: headers,
}).then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
})
}
axios.$put = (url, params) => {
var headers = {
'Content-Type': 'application/x-www-form-urlencoded'
};
return new Promise((resolve, reject) => {
axios.put(url, util.transformFormData(params), {
headers: headers,
}).then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
})
}
axios.$postExport = function (url, parameter) {
return axios({
url: url,
data: parameter,
method: 'post',
responseType: 'blob'
}) }
export default axios

封装axios请求的更多相关文章

  1. vue全局设置请求头 (封装axios请求)

    Vue.http.interceptors.push((request, next) => { // 请求发送前的处理逻辑 request.headers.set('Authorization' ...

  2. axios请求的封装

    /* axios的请求封装 */         //axios的原生写法get,post请求         //第一个参数为请求地址,第二个参数为请求的参数,params是将参数拼接在url的后面 ...

  3. Vue中断axios请求-切换页面+重复请求

    切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...

  4. Vue切换页面时中断axios请求

    一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...

  5. axios请求封装和异常统一处理

    前端网络请求封装前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了a ...

  6. Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

    1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...

  7. axios 请求二次封装

    /** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params) { ...

  8. axios请求方法封装.

    axios的使用上一般封装好对应的方法,ES6导出,直接调用,消息通知使用了ElementUI的Message组件. 这是一个封装了axios的Rest风格的工具类,包扩常用的POST,GET,PUT ...

  9. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

随机推荐

  1. ES6-11学习笔记--const

    新声明方式:const 1.不属于顶层对象 window 2.不允许重复声明 3.不存在变量提升 4.暂时性死区 5.块级作用域   以上特性跟let声明一样,特性可看 let 的学习笔记:链接跳转 ...

  2. 关于根据数据反选checkbox

    前两天完成了一个连接hbase数据库的mis系统,mis系统中经常需要修改功能,复选框.多选框等等的自动勾选,感觉很麻烦,在此记录一下修改功能checkbox自动选中. 例子: <div cla ...

  3. oracle 多列求和

    第一种: select sum(decode(count1,null,0,count1) +decode(count2,null,0,count2) +decode(count3,null,0,cou ...

  4. SpringMVC获取请求参数-基本类型

    1.Controller中的业务方法的参数名称要与请求参数的name一致,参数值会自动映射匹配 (json形式) <dependency> <groupId>com.faste ...

  5. 深入剖析 RocketMQ 源码 - 负载均衡机制

    RocketMQ作为一款流行的消息中间件在各大互联网应用广泛,本文主要分析RocketMq在消息生产和消费过程中的负载均衡机制,并创新提出消费端负载均衡策略的改写以实现固定IP消费的可能.

  6. SpringMVC快速使用——基于注解

    SpringMVC快速使用--基于注解 1.引入依赖 <!-- 定义Spring版本 --> <properties> <spring.verson>5.3.8&l ...

  7. VMware下ubuntu 20.04扩容/磁盘

    最近搞zabbix监控,发现搭建的监控server主机磁盘告警.提示/超过阈值80%. 有实在VMware软件下的虚拟机,首先我就是给虚机磁盘增加容量. 增加后发现没什么改变,看来还需要其他操作. 在 ...

  8. css 让一行文字 字与字的隔开一点

     效果: css: letter-spacing: 5rpx; 我这是小程序. 单位自带.px  rem em这些,随自己需要带.

  9. “浪潮杯”第九届山东省ACM大学生程序设计竞赛 F: Four-tuples容斥定理

    题目 F : Four-tuples  输入 1 1 1 2 2 3 3 4 4 输出 1 题意 给l1, r1, l2, r2, l3, r3,  l4, r4​ , 八个数据, 要求输出在区间[l ...

  10. VisualStudio安装步骤

    1.下载vs2017,点击安装 2.选择asp.net选项进行安装,如果需要其他的功能,可以选上 3.更改安装路径,尽量把文件安装在c盘以外的盘上,因为c盘是系统盘,安装的东西越多电脑会越卡.注意:不 ...