封装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.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
随机推荐
- mpvue 如何使用腾讯视频插件?
1.在小程序微信开放平台:设置 --- 第三方服务里,申请腾讯视频插件2.申请成功后就可以在项目中使用了 具体使用步骤如下:1.在项目目录src下的main.js中加入下面代码,这里代码会被编译到ap ...
- 2D骨骼动画工具DragonBones的使用教程
怎样用更少的美术成本创造出更生动的动画效果?今天就为大家介绍一套开源的2D骨骼动画框架和工具--DragonBones,它包含了桌面骨骼动画制作工具DragonBonesPro和一套多语言版本的Dra ...
- 体温填报app作业演示
今日学习 今天把这个体温填写app作业,做完了. 具体开发流程:https://www.cnblogs.com/yuxuan-light-of-Taihu-Lake/p/14362107.html 点 ...
- Linux上安装RePlace
RePlAce: Advancing Solution Quality and Routability Validation in Global Placement 项目地址 https://gith ...
- FastAPI(七十四)实战开发《在线课程学习系统》接口开发-- 删除留言
之前文章FastAPI(七十三)实战开发<在线课程学习系统>接口开发-- 回复留言,那么我们这次分享删除留言接口的开发 可以对留言进行删除,这里的删除,我们使用的是逻辑的删除,不是物理删除 ...
- 模拟FCFS调度算法(先来先服务)
文章目录 一.FCFS的介绍 二.代码演示 三.代码分析 1.使用节点模拟进程 2.SimulateFCFS(核心模拟FCFS类) 3.创建一个节点为n的队列(模拟就绪队列) 4.核心计算分析 5.输 ...
- spring-注入集合对象
1.创建Stu类 package com.spring.collections; import java.util.Arrays; import java.util.List; import java ...
- LC-24
[24. 两两交换链表中的节点](https://leetcode-cn.com/problems/swap-nodes-in-pairs/) 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的 ...
- springcloud集群测试
使用ribbon实现负载均衡,访问同一个url,轮询不同的服务提供端,从不同的数据库中取数据.
- Mybatis项目无法初始化异常
该异常是Maven资源导出时出错,.xml文件或者.properties文件不能正常导出所致,最简单的办法就是在目标文件上复制粘贴一份.xml文件或者是.properties文件: 但是实际应用的过程 ...