封装axios请求
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请求的更多相关文章
- vue全局设置请求头 (封装axios请求)
Vue.http.interceptors.push((request, next) => { // 请求发送前的处理逻辑 request.headers.set('Authorization' ...
- axios请求的封装
/* axios的请求封装 */ //axios的原生写法get,post请求 //第一个参数为请求地址,第二个参数为请求的参数,params是将参数拼接在url的后面 ...
- Vue中断axios请求-切换页面+重复请求
切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...
- Vue切换页面时中断axios请求
一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...
- axios请求封装和异常统一处理
前端网络请求封装前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了a ...
- Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)
1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...
- axios 请求二次封装
/** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params) { ...
- axios请求方法封装.
axios的使用上一般封装好对应的方法,ES6导出,直接调用,消息通知使用了ElementUI的Message组件. 这是一个封装了axios的Rest风格的工具类,包扩常用的POST,GET,PUT ...
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
随机推荐
- 【二次元的CSS】—— 用 DIV + CSS3 画大白(详解步骤)
原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了. 且细节相当到位.所以我就fork了一下,在此我也分享一下.同时,我也 ...
- 前端系列——快速理解babel6配置过程
繁琐的配置? 你能快速读懂babel的官方文档吗? 你能根据官方文档快速配置好babelrc吗? 你能明白自己需要哪些插件吗? 没有搞明白这3个问题,请往下看. 快速理解babel 6 来看一张让人颤 ...
- 给大家补充一个结构体的例子:下面TwoNumber就是一个形式上的结构体
给大家补充一个结构体的例子:下面TwoNumber就是一个形式上的结构体: class TwoNumber { int num1; int num2; } public class T ...
- JWT介绍及使用
目录 JWT-JSON WEB TOKEN JWT组成 header payload signature JWT校验 JWT获取信息 JJWT(java jwt api)使用 导入依赖 测试代码 JW ...
- vue简单的父子组件之间传值
todo-list为例子: 代码: 父传子--------------属性 v-bind 子传父--------------$emit <!DOCTYPE html> <html ...
- AcWing 1222. 密码脱落
题目链接 题目描述: X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于 ...
- linux find命令 -mtime参数 根据修改时间查找文件
命令:find 搜索路径 -mtime n 主要说明n的含义: 例: n=5 "5"指的是前 5~6 天那一天修改的文件 n=-5 "-5"指的是 5 天内修改 ...
- MySQL入门学习day3随笔3
JDBC 数据库驱动 我们的程序会通过数据库驱动和数据库打交道 JDBC Sun公司简化开发人员的操作,提供的规范 第一个JDBC项目 创建一个Java项目 导入jar包 编写测试代码 1 creat ...
- 好用的表单验证工具 vuelidate
Vue validation(表单验证)--vuelidate 表单是用户那里收集的数据的工具.如果它没有收集到你需要的数据,或者收集到的数据不对,那么你的表单就没有达到它的目的.这就是为什么我们需要 ...
- 移动安卓App+BurpSuite的渗透测试
从Android 7.0及以上版本开始,安卓系统更改了信任用户安装证书的默认行为,用户安装的证书都是用户证书,因此不管是filddle还是burp,都是把他们的根证书安装到了用户证书,而有部分移动ap ...