封装三:

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 封装(三)的更多相关文章

  1. vue axios封装

    前言: 对第三方库进行二次封装和抽离到统一模块,项目面对自己的模块进行开发.如果有一天更换库,只需要修改自己模块中的代码,无需对整个项目进行重构. 将axios网络请求库封装到network文件下的r ...

  2. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  3. vue axios 封装(二)

    封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...

  4. vue Axios 封装与配置项

    import axios from "axios"; import qs from "qs"; import { Message } from "el ...

  5. vue(axios)封装,content-type由application/json转换为application/x-www-form-urlencoded

    现在主流的http请求头的content-type有三种(不讨论xml): application/x-www-form-urlencoded  最常见的提交数据方式,与原生form表单数据一致,在c ...

  6. Vue axios封装 实现请求响应拦截

    封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...

  7. vue axios 封装(一)

    封装一: 'use strict' import axios from 'axios' import qs from 'qs' import NProgress from 'nprogress' im ...

  8. vue axios封装以及API统一管理

    在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中.当项目越来越大的时候,接口的请求也会越来越多,怎么去管理 ...

  9. 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token

    //使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...

随机推荐

  1. 【转】git-stash用法小结

    https://www.cnblogs.com/tocy/p/git-stash-reference.html 缘起 今天在看一个bug,之前一个分支的版本是正常的,在新的分支上上加了很多日志没找到原 ...

  2. 理解Shadow DOM(一)

    1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...

  3. template 与 host , item trigger的关系

    1.host关联template的关系 .Host可以连接到一个或多个模板. Template具有继承关系,可以从一个Template link到另外一个Template. . Host和Templa ...

  4. 01-认识Jenkins

    1.1 Jenkins是什么? Jenkins官网: http://jenkins.io/ .Jenkins前身是Hudson,使用java语言开发的自动化发布工具.在中大型金融等企业中普遍使用Jen ...

  5. ODPS-Java-SDK快速入门

    一.简介 核心接口包括:AliyunAccount,MaxCompute(SDK中使用原名ODPS)等常见对象组件 更多参见文档:https://help.aliyun.com/document_de ...

  6. 快看Sample代码,速学Swift语言(3)-运算符

    运算符是用来检查,更改或组合值的特殊符号或短语.Swift提供的很多常规的运算符,如+.-.*./.%.=.==等,以及逻辑运算的&&.||等等,基本上不需要重复介绍,我们在这里只需要 ...

  7. 异步时代-java的协程路在何方

    面试官:你知道协程吗? 你:订机票的那个吗,我常用. 面试官:行,你先回去吧,到时候电话联系 ........ 很尴尬,但是事实是,很大一部分的程序员不知道协程是啥玩意,更大一部分的程序员,项目中没用 ...

  8. Django 多表查询练习题 Q查询 F查询 聚合 分组

    -------------------------------------------------自己偷的懒,或许用加倍时间也补不回来,珍惜现在的拥有的时光,把我现在! 上节回顾 基于对象的跨表查询( ...

  9. H5 13-子元素选择器

    13-子元素选择器 p{ color: red; } */ /* #identity>p{ color: blue; } */ div>ul>li>p{ color: purp ...

  10. 结对项目——图形界面实现与dll动态链接

    先来一发软件截图~~~ 生成题目的界面 测评界面 第三块本来准备做一个文件历史记录的界面,但是由于时间不够,暂时还没做完. 图形界面的设计与实现 由于对传统的对话框风格不太满意,所以这次作业的图形界面 ...