封装三:

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. Django:安装和启动

    最近在学习利用python语言进行web站点开发,使用的框架是Django.这篇博客主要介绍Django的安装和简单使用. 一.Django介绍 Django是一个开源的Web应用框架,由Python ...

  2. KNN-笔记(2)

    1 - kd Tree KD树是一种对K维空间中的实例点进行存储以便对其进行快速检索的树形数据结构.KD树其实就是二叉树,表现为对K维空间的一个划分,构造kd树相当于不断的用垂直于坐标轴的超平面将k维 ...

  3. odoo10学习笔记

    odoo的API: Odoo新API的介绍与应用: odoo新api的实现是借助于python装饰器.新API的装饰器主要有以下几种: model,multi,one,constrains,depen ...

  4. 【原创】研发应该懂的binlog知识(上)

    引言 为什么写这篇文章? 大家当年在学MySQL的时候,为了能够迅速就业,一般是学习一下MySQL的基本语法,差不多就出山找工作了.水平稍微好一点的童鞋呢还会懂一点存储过程的编写,又或者是懂一点索引的 ...

  5. Fiddler抓包和修改WebSocket数据,支持wss

    记录一下用Fiddler对WebSocket收发的数据进行抓包分析和篡改数据,只找到这么一个方法,能用就行吧. 时间:2019-3-29 环境: win7 + Fiddler 5.0 Fiddler抓 ...

  6. Python-Requests库详解

    查看一下是否安装requests库 什么是Requests Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库如果你看过上篇文章关 ...

  7. Python Revisited Day 04 (控制结构与函数)

    目录 4.1 控制结构 4.1.1 条件分支 4.1.2 循环 4.2 异常处理 4.2.1 捕获与产生异常 4.2.2 自定义异常 4.3 自定义函数 Tips 参数默认值为可变时 危险 4.3.1 ...

  8. Sagheer and Nubian Market CodeForces - 812C (二分)

    On his trip to Luxor and Aswan, Sagheer went to a Nubian market to buy some souvenirs for his friend ...

  9. 批量采集世纪佳缘会员图片及winhttp异步采集效率

    原始出处:http://www.cnblogs.com/Charltsing/p/winhttpasyn.html 最近老有人问能不能绕过世纪佳缘的会员验证来采集图片,我测试了一下,发现是可以的. 同 ...

  10. C语言之运算符、表达式和语句

    #include<stdio.h> #define ADJUST 7.31 int main(void) { const double SCALE = 0.333; double shoe ...