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. elf,基于flexbox的响应式CSS框架

    官网地址:http://jrainlau.github.io/elf/项目地址:https://github.com/jrainlau/elf 介绍 取名为"精灵"的elf,是一个 ...

  2. java之String字符串根据指定字符转化为字符串数组

    public static void main(String[] args){ String str="护肤,药品,其他"; String temp[]; temp=str.spl ...

  3. js判断输入数字是否是整数,金额、数字

    function isIntNum(strNum){//js判断输入数字是否是整数 仅供学习思想 var strCheckNum = strNum+""; if(strCheckN ...

  4. 输入n,然后输入n个数,使它升序输出

    #include<iostream> using namespace std; int main() { int n,i,j,m,k; cin>>n; int a[n];  f ...

  5. C++五子棋(一)——开发环境

    开发环境 环境准备 Visual Studio Windows EasyX图形库 素材文件 素材文件已经准备了,点击此处获取 百度网盘链接 提取码:su6p 创建项目 打开Visual Studio ...

  6. js 轮播图 (原生)

    注 : 此处内容较多, 只显示代码, 具体讲解看注释.  具体参考 "黑马 pink老师"   https://www.bilibili.com/video/BV1Sy4y1C7h ...

  7. Python实现双X轴双Y轴绘图

    诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章, ...

  8. 简单了解 TiDB 架构

    一.前言 大家如果看过我之前发过的文章就知道,我写过很多篇关于 MySQL 的文章,从我的 Github 汇总仓库 中可以看出来: 可能还不是很全,算是对 MySQL 有一个浅显但较为全面的理解.之前 ...

  9. springboot整合freemark,thymeleaf

    先在pom文件引入freemark,thymeleaf的依赖,thymeleaf的html文件放在Resource-templates-thymeleaf目录下,freekmarker的ftl文件放在 ...

  10. python数据处理-matplotlib入门(4)-条形图和直方图

    摘要:先介绍条形图直方图,然后用随机数生成一系列数据,保存到列表中,最后统计出相关随机数据的概率并展示 前述介绍了由点进行划线形成的拆线图和散点形成的曲线图,连点成线,主要用到了matplotlib中 ...