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 ...
随机推荐
- 在Java中,将ExecutorService转为守护程序
问题描述 我正在Java 1.6中使用一个ExecutoreService,简单地开始 ExecutorService pool = Executors.newFixedThreadPool(THRE ...
- 关于vue的混入使用
普通使用: 定义一个 mixin.js文件 随便定一些数据 记得后面导出 然后在需要用的文件 就可以获取了. 全局混合: 引入vue 全局注册混合 main.js 入口文件引入 然后就可以在所有页面使 ...
- 【php增删改查实例】第二十五节 - 在main.php中显示头像
在用户成功上传头像以后,用户登录系统,应该能够看到自己的头像,本节演示如何在这个地方: 添加用户头像. 1.用DIV做: border-radius:50% background:url(xxx.jp ...
- vue-area-linkage Vue省市区三级列表联动插件使用
官方演示地址 // v5及之后的版本 数据依赖于area_data npm i --save vue-area-linkage area-data import Vue from 'vue'; imp ...
- log4j打印堆栈信息
原文地址:https://blog.csdn.net/xianyu_0418/article/details/6043174 大家都知道,网站在运行的过程中,打印必要的log对记录网站的运行情况.从而 ...
- 第四次oo博客
论述测试与正确性论证的效果差异 单元测试利用测试者构造的测试用例来检查类或方法的正确性,一般来说所需要测试的用例是无穷多的,通过人为构造代表性的测试用例来尽量测试所有代码.测试的优点在于不易出错,只要 ...
- UnderWater+SDN论文之五
Underwater Sensor Networks with Mobile Agents: Experience from the Field Source: LNICST 2013 论文是来自两个 ...
- Day3 Python基础之while、for循环(二)
1.数据运算 算数运算 整除运算:// 取余运算:% 指数运算:** 赋值运算 b+=a;等价于b=b+a 比较运算 >,<,==,!=,>=,<= 逻辑运算符 and .or ...
- PS调出春夏外景婚纱照
效果图 先来看看原图和夏季的效果图 先看看原图 教程终于来咯 原图暗部太深,需要将暗部提亮.可以把暗部选区选出来.为了精确选择暗部选区,我利用计算命令如上图所示.最后得到暗部的选区. 上图得到了暗部选 ...
- ibatis实战之插入数据(自动生成主键)
ibatis实战之插入数据(自动生成主键) --------- 如果你将数据库设计为使用自动生成的主键,就可以使用ibatis的<selectKey>元素(该元素是<insert&g ...