在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式(配合axios,同时配置loading)
'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)的更多相关文章
- 【RocketMQ】同一个项目中,同一个topic,可以存在多个消费者么?
一.问题答案 是不可以的 而且后注册的会替换前注册的,MqConsumer2会替换MqConsumer,并且只结束tag-2的消息 /** * @date 2019/05/28 */ @Compone ...
- django同一个项目中连接多个数据库
一.场景与思路 同一个项目中需要连接多个数据库. 二.代码 代码中主要是三个部分,settings.models以及自己写的一个类. 1.自己写的文件:database_app_router.py ...
- application/json和application/x-www-form-urlencoded区别
application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型. EncType: enctype 属性规定在发送到服务器之前应该如何 ...
- multipart/form-data,application/json和application/x-www-form-urlencoded区别
application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型. EncType: enctype 属性规定在发送到服务器之前应该如何 ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基础文件配置,Web框架的本质,服务器程序和应用程序(wsgiref服务端模块,jinja2模板渲染模块)的使用
Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基 ...
- QT断点续传(原理:需要在HTTP请求的header中添加Rang节,告诉服务器从文件的那个位置开始传输.格式为bytes 开始传输的位置)
//功能: 根据一个URL地址将数据保存到指定路径下,支持断点续传//参数: url --需要访问的URL地址// SavePath -- ...
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- SQL Server中灾难时备份结尾日志(Tail of log)的两种方法
转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...
随机推荐
- 多线程--ThreadLocal类
一.ThreadLocal类简介--此类是在整个开发过程中至关重要的类,他主要是在开发过程中解决了核心资源和多线程并发访问的处理情况--在真正去了解ThreadLocal类作用的时候,我们可以先编写一 ...
- hdu3438 Buy and Resell(优先队列+贪心)
Buy and Resell Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- Python基础篇(格式化输出,运算符,编码):
Python基础篇(格式化输出,运算符,编码): 格式化输出: 格式:print ( " 内容%s" %(变量)) 字符类型: %s 替换字符串 %d 替换整体数字 ...
- java.nio.Buffer 中的 flip()方法
在Java NIO编程中,对缓冲区操作常常需要使用 java.nio.Buffer中的 flip()方法. Buffer 中的 flip() 方法涉及到 Buffer 中的capacity.posi ...
- elasticsearch 嵌套对象之嵌套类型
nested类型是一种特殊的对象object数据类型(specialised version of the object datatype ),允许对象数组彼此独立地进行索引和查询. 1. 对象数组如 ...
- Python Socket(未编辑)
客户端 import socket 导入socket模块 client = socket.socket() 声明socket协议类型,同时生成socket连接对象 client.connect(('l ...
- 版本控制系统之SVN和GIT的区别
版本控制器的作用: 1. 可以协同代码管理,让多人开发代码得以实现. 2. 回归到以前的任何一个时间点的代码处(好比:开始写了很多代码,后面有修改了一些,突然IDE崩溃,但是发现还是以前的代码更好,这 ...
- nginx启动报错: libpcre.so.1/libpcre.so.0: cannot open shared object file
1.用file /bin/ls查看当前系统是几位的 2.64位系统创建软连接:ln -s /usr/local/lib/libpcre.so.1 /lib64 3.32未系统创建软连接:ln -s / ...
- 数组转xls格式的excel文件&数据转csv格式的excle
/** * 数组转xls格式的excel文件 * @param array $data 需要生成excel文件的数组 * @param string $filename 生成的excel文件名 * 示 ...
- [CSP-S模拟测试]:E(贪心)
题目传送门(内部题48) 输入格式 第一行一个整数$n$.接下来$n$行每行两个整数$x_i,y_i$. 输出格式 一行一个整数表示答案. 样例 样例输入$1$: 23 72 5 样例输出$1$: 样 ...