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 ...
随机推荐
- wxWidgets 在 Linux 下开发环境配置
本文基于 CodeBlocks (16.0.1) 和 wxWidgets (3.0.2) 搭建 Linux 下 GUI 开发环境. 1. 安装 CodeBlocks Ubuntu 默认的源当前 Cod ...
- CF962F Simple Cycles Edges
CF962F Simple Cycles Edges 给定一个连通无向图,求有多少条边仅被包含在一个简单环内并输出 \(n,\ m\leq10^5\) tarjan 首先,一个连通块是一个环,当且仅当 ...
- redis学习(二)——String数据类型
一.概述 字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型的 ...
- burnside+polya 整理
先定义几个含义和符号:起始状态/方法/位置/元素/:以染色为例,起始状态是所有的染色方案,方法是以起始状态所有染色方案为基准转变为新的染色情景的操作(如旋转),位置则必须是没有任何染色效果的抽象空间, ...
- Nginx(一)------简介与安装
说到 Nginx ,可能大家最先想到的就是其负载均衡以及反向代理的功能.没错,这也是当前使用 Nginx 最频繁的两个功能,但是 Nginx 可不仅仅只有这两个功能,其作用还是挺大的,本系列博客就来慢 ...
- CF741 D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths
题目意思很清楚了吧,那么我们从重排回文串的性质入手. 很容易得出,只要所有字符出现的次数都为偶数,或者有且只有一个字符出现为奇数就满足要求了. 然后想到什么,Hash?大可不必,可以发现字符\(\in ...
- JavaEE学习之JAXB
一.前言 JAXB——Java Architecture for XML Binding,是一项可以根据XML Schema产生Java类的技术.JAXB提供将XML实例文档反向生成Java对象树的方 ...
- IDEA+Maven+Tomcat构建项目流程
0.准备 本文主要解决在IDEA上开发Maven-webapp项目关联Tomcat的问题. 首先,确保本地计算机下载解压了Tomcat压缩包,以及配置好了Java环境. 1.新建Mavne项目 2.I ...
- PayPal、支付宝诞生的故事 | 概述起源篇
你知道第三方支付是如何由来的吗? 第三方支付概述 说起第三方支付,好像大家都知道,天天不是用支付宝和微信吗?支付宝和微信支付确实是行业内非常具有代表的第三方支付公司,但现在他们已经不完全是一家第三方支 ...
- APM实践目录
长路漫漫,如果不能作出一款可用开源的东西出来,那是对时光的浪费. 这是我的学习分布式调用链的实践之路! 思考大纲: .Net架构篇:思考如何设计一款实用的分布式监控系统? 理论篇: http:// ...