封装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.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
随机推荐
- 前端规范(ES6BEMOOCSSSMACSS)
前端规范 在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率. Javascript Javascript规范直接参考airbnb: ES6 ...
- transformjs 污染了 DOM?是你不了解它的强大
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得tran ...
- 7分钟理解JS的节流、防抖及使用场景
前言 据说阿里有一道面试题就是谈谈函数节流和函数防抖.糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习.here we go! 概念和例子 函数防抖(debounce) ...
- link和@import的区别浅析
我们都知道,外部引入 CSS 有2种方式,link标签和@import.它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学习 ...
- ES6-11学习笔记--代理Proxy
Proxy代理 常用拦截方法 ES5拦截: let obj = {} let newVal = '' Object.defineProperty(obj, 'name', { get() { cons ...
- vue 相关问题整理
- data_loader读取器
import random import numpy as np import pandas as pd import cv2 def date_loader(image_dir, file_name ...
- Vmware虚拟机三种网络模式详解(转载)
原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 由于l ...
- collections、time、datetime、random模块
今日内容概要 1.re模块的其他知识 2.正则起别名与分组机制 3.collections模块 4.time与datetime模块 5.random随机数模块 今日内容详细 re模块的其他知识 imp ...
- 『忘了再学』Shell基础 — 9、Bash中的特殊符号(一)
目录 1.双单引号 2.双引号 3.$符号 4.反引号 5.$()符号 6.#符号 7.\符号 1.双单引号 '':单引号.在单引号中所有的特殊符号,如$和"`"(反引号)都没有特 ...