vue axios 封装(三)
封装三:
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth' // 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 10000 // 请求超时时间
}) // request拦截器
service.interceptors.request.use(config => {
// console.log('store.getters.token', getToken())
if (store.getters.token) {
// console.log('tag9528', 'bearer ' + getToken())
config.headers['Authorization'] = 'bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
} else if (getToken()) {
config.headers['Authorization'] = 'bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
// console.log(error) // for debug
Promise.reject(error)
}) // service.interceptors.request.use(config => {
// if (store.getters.token) {
// config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// }
// return config
// }, error => {
// // Do something with request error
// console.log(error) // for debug
// Promise.reject(error)
// }) // respone拦截器
// service.interceptors.response.use(
// response => {
// console.log(response)
// const res = response.data
// if (!res.success) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000 // })
// // 401:Token 过期了;
// if (response.status === 401) {
// // 重新获得token
// }
// // 50008:非法的token; 50012:其他客户端登录了;
// if (res.code === 50008 || res.code === 50012 || response.status === 401) {
// MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
// confirmButtonText: '重新登录',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload()// 为了重新实例化vue-router对象 避免bug
// })
// })
// }
// return Promise.reject('error')
// } else {
// return response
// }
// },
// error => {
// console.log('err' + error)// for debug
// Message({
// message: error.message,
// type: 'error',
// duration: 5 * 1000
// })
// return Promise.reject(error)
// }
// )
service.interceptors.response.use(
response => {
const res = response.data
if (!res.success) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
if (res.success === false) {
Message({
message: res.error,
type: 'error',
duration: 5 * 1000
})
}
// 401:Token 过期了;
if (response.status === 401) {
// 重新获得token
}
// 50008:非法的token; 50012:其他客户端登录了;
if (res.code === 50008 || res.code === 50012 || response.status === 401) {
MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else {
return response
}
},
error => {
// console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
/**
* 封装post请求
* @param url
* @param data
*/
export function post(url, data) {
return service({
url: url,
method: 'post',
data: data
})
} /**
* 封装get请求
* @param url
* @param data
*/
export function get(url, data) {
return service({
url: url,
method: 'get',
data: data
})
}
/**
* 封装http请求
* @param url
* @param data
*/
export function http(obj) {
return service({
url: obj.url,
method: obj.method,
data: obj.data
})
}
export default service
vue axios 封装(三)的更多相关文章
- vue axios封装
前言: 对第三方库进行二次封装和抽离到统一模块,项目面对自己的模块进行开发.如果有一天更换库,只需要修改自己模块中的代码,无需对整个项目进行重构. 将axios网络请求库封装到network文件下的r ...
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- vue axios 封装(二)
封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...
- vue Axios 封装与配置项
import axios from "axios"; import qs from "qs"; import { Message } from "el ...
- vue(axios)封装,content-type由application/json转换为application/x-www-form-urlencoded
现在主流的http请求头的content-type有三种(不讨论xml): application/x-www-form-urlencoded 最常见的提交数据方式,与原生form表单数据一致,在c ...
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- vue axios 封装(一)
封装一: 'use strict' import axios from 'axios' import qs from 'qs' import NProgress from 'nprogress' im ...
- vue axios封装以及API统一管理
在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中.当项目越来越大的时候,接口的请求也会越来越多,怎么去管理 ...
- 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token
//使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...
随机推荐
- ogg BR – BOUNDED RECOVERY 测试案例
首先,我们来看两个OGG同步中可能的问题: l oracle在线日志包含已提交的和未提交的事务,但OGG只会将已提交的事务写入到队列文件.因此,针对未提交的事务,特别是未提交的长事务,OGG会怎样处理 ...
- 请根据英文单词的第一个字母判断星期几,如果第一个字母是一样的,则继续判断第二个字母。例如如果第一个字母是S,则继续判断第二个字母,如果第二个字母是a,则输出“星期六”
请根据英文单词的第一个字母判断星期几,如果第一个字母是一样的,则继续判断第二个字母.例如如果第一个字母是S,则继续判断第二个字母,如果第二个字母是a,则输出“星期六”.星期的英文单词如下表所示. 星期 ...
- 一篇自己都看不懂的点分治&点分树学习笔记
淀粉质点分治可真是个好东西 Part A.点分治 众所周知,树上分治算法有$3$种:点分治.边分治.链分治(最后一个似乎就是树链剖分),它们名字的不同是由于分治方式的不同的.点分治,顾名思义,每一次选 ...
- Spring+Struts2+Hibernate框架整合流程
一:基本步骤 新建Maven项目,导入相关依赖(推荐) 在WEB-INF的web.xml中进行配置 ————–Hibernate配置 —————- 创建entity包,创建数据库相关实体类 根据实体类 ...
- 分布式系统消息中间件——RabbitMQ的使用思考篇
分布式系统消息中间件--RabbitMQ的使用思考篇 前言 前面的两篇文章分布式系统消息中间件--RabbitMQ的使用基础篇与分布式系统消息中间件--RabbitMQ的使用进阶篇,我们简单介 ...
- [故障公告]阿里云“华东1地域部分负载均衡https访问异常“引起部分站点无法访问
今天上午 9:40 - 11:06 左右,由于阿里云“华东1地域部分负载均衡https访问异常”,造成我们的部分站点(尤其是博客后台)无法正常访问,给您带来了很大的麻烦,请您谅解. 现已恢复正常,如果 ...
- 使用 OpenSSL 创建私有 CA:3 用户证书
OpenSSL 创建私有 CA 三部曲:使用 OpenSSL 创建私有 CA:1 根证书使用 OpenSSL 创建私有 CA:2 中间证书使用 OpenSSL 创建私有 CA:3 用户证书 在前文&l ...
- 我的2017&2018
最近项目进入验收阶段,所以上班没那么忙碌了,但是怎么说呢,我可能天生是闲不住的主,觉得浑身不自在(我这样的人是不是特别不会享福),此处应该有个笑脸哈. 翻看了博客园好几个大牛写的技术文章,感慨大牛不愧 ...
- H5 后代选择器
12-后代选择器 我是段落 我是段落 我是段落 我是段落 我是段落 我是段落 <!DOCTYPE html> <html lang="en"> <he ...
- Elasticsearch--Aggregation详细总结(聚合统计)
Elasticsearch的Aggregation功能也异常强悍. Aggregation共分为三种:Metric Aggregations.Bucket Aggregations. Pipeline ...