'use strict'

import axios from 'axios'
// import qs from 'qs'
import { Notification} from 'element-ui' //使用elementui的提示显示
import { Loading } from 'element-ui'
import router from "../router"; let loading function startLoading() {
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.2)',
})
} function endLoading() {
loading.close()
} let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
} export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
// setTimeout(()=>{
endLoading()
// },1000)
}
}
axios.interceptors.request.use(config => {
showFullScreenLoading()
return config
}, err => {
return Promise.resolve(err)
}) axios.interceptors.response.use(response => {
tryHideFullScreenLoading()
if (response) {
switch (response.data.code) {
case 4011: //与后台约定登录失效的返回码,根据实际情况处理
sessionStorage.removeItem('');
sessionStorage.removeItem('');
router.replace({
path: '/'
})
}
}
return response
}, err => {
return Promise.resolve(err)
}) let base = '' // 接口地址 export const postRequest = (url, params,Func,isJson) => { //url: 接口名 ,params: 参数 ,Func: 直接取得内容data,isJson:决定取哪种格式
request(url, params,'post',Func,isJson)
}
export const request = (url, params,method,Func,isJson) => {
axios({
method: method,
url: `${base}${url}`,
data: params,
timeout: 6000,
// 格式的转化
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
if(isJson === 1 ){
ret = data[it]
}else{
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
}
return ret
}], // 请求头携带信息,类型默认为form,键值模式,传参为1
headers: {
'Content-Type': isJson === 1 ? 'application/json' : 'application/x-www-form-urlencoded',
'authorization': sessionStorage.getItem(''),
'token': sessionStorage.getItem('token')
}
}).then(data=>{
if (data.data.code === 200) {
Func(data.data.data)
}else if(data.data.code === 406){
Notification.info({
title: '错误',
message: data.data.message
})
}else if(data.data.code === 4011){
sessionStorage.removeItem('');
sessionStorage.removeItem('');
// window.location.href = '/'
}else if(data.data.code === 4012){
request('',{
'authorization': sessionStorage.getItem(''),
'refresh_token': sessionStorage.getItem('')
},'post',(res)=>{
//缓存新的token
console.log(res)
let token = res.token;
sessionStorage.setItem("token", token);
request(url, params,method,Func);
}); }else if(data.data.code === 400 || data.data.code === 505 || data.data.code === 404|| data.data.code === 500){
Notification.error({
title: '错误',
message: '网络异常'
})
}else{
Func1(data.data.code,data.data.message);
}
})
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data', //上传文件的传输格式
'authorization': sessionStorage.getItem('userName'),
'token': sessionStorage.getItem('token')
}
})
}

// 方式1,
export const getRequest = (url, params,Func,isJson) => {
request(url, params,'get',Func,isJson)
} // 方式2
export const getRequest = (url,params,Func) => {
return axios({
method: 'get',
url: `${base}${url}`,
headers: {
'Content-Type': 'multipart/form-data',
'authorization':sessionStorage.getItem(''),
'token':sessionStorage.getItem('token')
}
}).then(data=>{
if (data.data.code === 200) {
Func(data.data.data)
}
})
}
 

在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式(配合axios,同时配置loading)的更多相关文章

  1. 【RocketMQ】同一个项目中,同一个topic,可以存在多个消费者么?

    一.问题答案 是不可以的 而且后注册的会替换前注册的,MqConsumer2会替换MqConsumer,并且只结束tag-2的消息 /** * @date 2019/05/28 */ @Compone ...

  2. django同一个项目中连接多个数据库

    一.场景与思路 同一个项目中需要连接多个数据库. 二.代码 代码中主要是三个部分,settings.models以及自己写的一个类. 1.自己写的文件:database_app_router.py  ...

  3. application/json和application/x-www-form-urlencoded区别

    application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型. EncType: enctype 属性规定在发送到服务器之前应该如何 ...

  4. multipart/form-data,application/json和application/x-www-form-urlencoded区别

    application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型. EncType: enctype 属性规定在发送到服务器之前应该如何 ...

  5. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  6. Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基础文件配置,Web框架的本质,服务器程序和应用程序(wsgiref服务端模块,jinja2模板渲染模块)的使用

    Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基 ...

  7. QT断点续传(原理:需要在HTTP请求的header中添加Rang节,告诉服务器从文件的那个位置开始传输.格式为bytes 开始传输的位置)

    //功能:    根据一个URL地址将数据保存到指定路径下,支持断点续传//参数:    url            --需要访问的URL地址//         SavePath       -- ...

  8. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  9. SQL Server中灾难时备份结尾日志(Tail of log)的两种方法

    转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...

随机推荐

  1. 在Linux上搭建私有git仓库

    最近在学Linux,顺便将自己的服务器用起来,不然又得废弃一年.这次是跟着网上的教程做一个简单的git私有仓库,复杂完整的git系统还需使用gitlib系统. 首先在linux上安装git yum i ...

  2. 【转载】POST/GET请求中RequestBody和RequestParam的应用场景

    原文链接:https://blog.csdn.net/justry_deng/article/details/80972817 原文链接:https://www.jianshu.com/p/49819 ...

  3. 2018-2-13-win10-UWP-应用设置

    title author date CreateTime categories win10 UWP 应用设置 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  4. 第十三章 存储之volume

    容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题.首先,当容器崩溃时,kubelet 会重启它,但是容器中的文件将丢失——容器以干净的状态(镜像最初的状态)重新启动.其 ...

  5. 低门槛彻底理解JavaScript中的深拷贝和浅拷贝

    作者 | 吴胜斌 来源 | https://www.simbawu.com/article/search/9 在说深拷贝与浅拷贝前,我们先看两个简单的案例: //案例1var num1 = 1, nu ...

  6. ivew Upload 上传时附带的额外参数

    <Upload action="/api/device/importData" :data="uploadData" :before-upload=&qu ...

  7. 关于使用html2canvas 绘制图片的坑

    html2canvas绘制跨域图片之后,会导致画布被污染,从而无法使用canvas的toDateUrl()等方法获取图片数据的方法,这是canvas的限制而并非html2canvas的原因.好了锅甩好 ...

  8. 12.Unsafe原子性操作

    import sun.misc.Unsafe; /** * JDK8 * JDK 的此jar 包中的 Unsafe 类提供了硬件级别的原子性操作 */ public class UnsafeTest ...

  9. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  10. Java中的小知识。

    package jicheng; public class Animal { //定义一个成员变量name. private String name; public String getName() ...